1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

how to?

Discussion in 'HTML & Website Design' started by deals_yes, Sep 25, 2008.

0
  1. #1
    i was searching through the net and found this site. how do people do that stuff? anyone know? tutorials would be nice
     
    deals_yes, Sep 25, 2008 IP
  2. HDaddy

    HDaddy Active Member

    Messages:
    287
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    60
    #2
    I think it´s just a hover effect, made with JS or css. Not difficult to do
     
    HDaddy, Sep 25, 2008 IP
  3. buzzmaker

    buzzmaker Peon

    Messages:
    103
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Its just CSS. No JS required. It could be done with JS and CSS too, but who needs JS when it could be done only with CSS.

    These are just Hover styles where a different image is called on the page which swaps the first one. This could be done in a few different ways depending on the requirements. Sometimes it is a single image which is not displayed completely in the browser. When someone rollovers the image, the hidden part of the image replaces the first part which was displayed previously.

    May sounds difficult but very easy with just CSS.
     
    buzzmaker, Sep 25, 2008 IP
  4. deals_yes

    deals_yes Banned

    Messages:
    155
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    any tutorials so i get a better understanding of it working?
     
    deals_yes, Sep 25, 2008 IP
  5. scoopy82

    scoopy82 Active Member

    Messages:
    838
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    70
    #5
    Reverse engineering ;)

    Hit <Ctrl>+U and follow their source code. You will see that those hover links and image samples are being displayed using CSS.

    IE: look at the first link and view the original sources:
    /images/aeeducation.jpg
    /images/aeeducation_btn.jpg
     
    scoopy82, Sep 25, 2008 IP
  6. deals_yes

    deals_yes Banned

    Messages:
    155
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    ok i will give that a try i guess although i tried to duplicate it using the css that they had and it didnt work
     
    deals_yes, Sep 25, 2008 IP
  7. pendelton

    pendelton Peon

    Messages:
    61
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #7
    You can also do it with one image, just do a background position change, like the basic Joomla template does the button color changes. To see how that is done just look at the template_css.css in the rhuk_solarflare_ii template for the a.mainlevel styling.
     
    pendelton, Sep 25, 2008 IP
  8. Grit.

    Grit. Well-Known Member

    Messages:
    1,424
    Likes Received:
    22
    Best Answers:
    1
    Trophy Points:
    110
    #8
    Google up some CSS rollover tutorials and see how the magic works ^^. I remember when javascript based rollovers were the in thing ^^
     
    Grit., Sep 25, 2008 IP
  9. deals_yes

    deals_yes Banned

    Messages:
    155
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #9
    i know how to do rollover images, thats easy. i was talking about when the images on that site are clicked and the photo pops up and the background fades in a way.
     
    deals_yes, Sep 25, 2008 IP
  10. scoopy82

    scoopy82 Active Member

    Messages:
    838
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    70
    #10
    The site you posted above is done with CSS... how exactly is beyond my understanding... but if your trying to achieve that same effect, google for something called "lightbox". It is javascript that does the same thing and is much easier to setup.
     
    scoopy82, Sep 25, 2008 IP
    deals_yes likes this.
  11. deals_yes

    deals_yes Banned

    Messages:
    155
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #11
    great, thanks i will give that a try :)

    Edit: I found what I was looking for thanks again :)
     
    deals_yes, Sep 25, 2008 IP
  12. Evan B.

    Evan B. Peon

    Messages:
    118
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #12
    Or its a roll over image.
     
    Evan B., Sep 25, 2008 IP