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 do this? (hover)

Discussion in 'CSS' started by kojakfilth, Jul 3, 2007.

  1. #1
    Hi i came accross with this site adstd.com and see that when you point your mouse on the contents the hr turns red.. can please teach me how to do it..?
     
    kojakfilth, Jul 3, 2007 IP
  2. uglyboy

    uglyboy Peon

    Messages:
    1,963
    Likes Received:
    134
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Its done with a bit of javascript.. Check the source code :D
     
    uglyboy, Jul 3, 2007 IP
  3. sgtsloth

    sgtsloth Peon

    Messages:
    205
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Yeah, that is done with javascript.

    If you check the source, there is a function called "setBGColor()" that changes a table cell's background color. This function is called when the mouse goes over certain table cells, like so:

    <td onMouseOver="javascript: setBGColor(this, 1, 0);" onMouseOut="javascript: setBGColor(this, 0, 0);">
    Code (markup):
    Hope that helps. :)
     
    sgtsloth, Jul 4, 2007 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #4
    Which should probably be done in CSS instead using the :hover property, with a .htc file to make IE 5&6 work.

    Try this on for size:
    http://battletech.hopto.org/for_others/Kojakfilth/hovertest.html

    and the CSS
    http://battletech.hopto.org/for_others/Kojakfilth/screen.css

    for IE 6 and earlier it relies on csshover2.htc which you can find out all about here:
    http://www.xs4all.nl/~peterned/csshover.html

    which implements :hover and :focus in IE6/earlier via javascript. On IE7 and on all other browsers it's a purely CSS solution.
     
    deathshadow, Jul 5, 2007 IP
  5. kojakfilth

    kojakfilth Notable Member

    Messages:
    3,000
    Likes Received:
    213
    Best Answers:
    0
    Trophy Points:
    210
    #5
    thanks guys for your suggestions. i will try this out later.. i think deathshadow have the best suggestion. coz im really want to do it in css..

    thanks guys.

    Kojak
     
    kojakfilth, Jul 5, 2007 IP
  6. Ginger Ninja

    Ginger Ninja Guest

    Messages:
    161
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #6
    I was shocked the other two people mentioned JavaScript. Follow this guys advice, this is the best way to go about it.
     
    Ginger Ninja, Jul 5, 2007 IP
  7. uglyboy

    uglyboy Peon

    Messages:
    1,963
    Likes Received:
    134
    Best Answers:
    0
    Trophy Points:
    0
    #7

    kojakfilth asked how it was done @ adstd.com and its done there with javascript... that being said i myself do prefer deathshadows implementation :cool:
     
    uglyboy, Jul 5, 2007 IP
  8. sgtsloth

    sgtsloth Peon

    Messages:
    205
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    0
    #8
    I only mentioned Javascript because he wanted to know how the website did it. Of course CSS would be a better way to go, using :hover. If you need help with that, here's an explanation.

    :)
     
    sgtsloth, Jul 5, 2007 IP