1 reply [Last post]
Koos
Offline
newbie
Last seen: 12 years 24 weeks ago
Joined: 2007-12-18
Posts: 1
Points: 0

Hi

I have HTML code using javascript for a rollover image effect like the following:

...


Product 1
Product 2
...

I want to replace this with a cleaner html using css:

...

...


...

The CSS:

.sidemenu li
{
WHAT COMES HERE TO GET/REPLACE THE JAVASCRIPT CODE?
}

It seems as if I can use

.sidemenu a:hover{
But I don't know how to replace my "normal" product1.png image with "product1up.gif" whenever the mouse is over the link
}
...but I don't know how to replace my "normal" product1.png image with "product1up.gif" whenever the mouse is over the link in css.

Another option I saw, was to write a Javascript function to search for specific tags (using document.getElementBy?("sidemenu"); ) and then run the event functions for those tags.

Alternatively, is there a way to set OnMouseOver or other Javascript events in CSS? From my feeling this javascript effect is part of the presentation and should therefore not be in the HTML content, but rather be in the CSS?

Thanks
Koos

Katie
Katie's picture
Offline
Enthusiast
Seattle, WA
Last seen: 4 years 30 weeks ago
Seattle, WA
Timezone: GMT-8
Joined: 2006-08-06
Posts: 357
Points: 2

You're correct in that you

You're correct in that you need to use the :hover pseudo class to get a similar effect, but you'd need JavaScript to replace the image inside the anchor tags. There's no way to set up JavaScript inside CSS. Check out this page as an alternate method: it uses the background-image as a product image, which is replaceable on :hover.

Title

ul.sidemenu
{ padding: 10px;
list-style: none;
}
li#prod1 a
{ display: block;
float: left;
border: dashed #999 1px;
margin: 5px;
padding: 2px 2px 34px 2px;
background: url(1.png) bottom center no-repeat;
}
li#prod2 a
{ display: block;
float: left;
border: dashed #999 1px;
margin: 5px;
padding: 2px 2px 34px 2px;
background: url(2.png) bottom center no-repeat;
}
li#prod1 a:hover
{ background-image: url(1_over.png);
}
li#prod2 a:hover
{ background-image: url(2_over.png);
}

Heading

  • California Roll
  • Salmon Nigiri

AttachmentSize
1.png 4.5 KB
1_over.png 2.19 KB
2.png 4.46 KB
2_over.png 2.26 KB

Blog: Pew Pew Laser Blog
Online File Storage: DropBox
Daily Deals on Local Activities: Groupon