Hi all,

I've got a problem, I want a couple of images under each other who are clickable. If you go over the image they need to change.

If I take one image it works, but if I take a couple of image's they are clickable but they don't change the image's..

--

Here are my scrips if i use one image(What does work):

HTML:

 

 

<div class="frisdrank"></div>
<a href="[url="http://google.nl/"]http://google.nl/[/url]"
onmouseover='thinkwithsatish.src="Images/Frisdrank1.gif" '
onmouseout='thinkwithsatish.src="Images/Frisdrank.gif"
'><center><img src="Images/Frisdrank.gif"
NAME="thinkwithsatish"/></center></a>
</div>

 

 

CSS:

 

.frisdrank {
display:block;
background:transparent url(Images/Frisdrank.gif);
}
.frisdrank:hover{
background-image: url{images/Frisdrank1.gif;
}

 

 

 

And here if I take more pictures(Does not work):

HTML:

 

<div class="right">
<a class="frisdrank" href="[url="http://google.nl/"]http://google.nl/[/url]"
onmouseover='thinkwithsatish.src="Images/Frisdrank1.gif" '
onmouseout='thinkwithsatish.src="Images/Frisdrank.gif"
'><center><img src="Images/Frisdrank.gif"
NAME="thinkwithsatish"/></center></a>
<a class="Wijnen" href="[url="http://google.nl/"]http://google.nl/[/url]"
onmouseover='thinkwithsatish.src="Images/Wijnen1.gif" '
onmouseout='thinkwithsatish.src="Images/Wijnen.gif"
'><center><img src="Images/Wijnen.gif"
NAME="thinkwithsatish"/></center></a>
</div>

 

CSS:

.right {
width:192px;
height:100%;
background-color:#fff;
float:right;
}
.frisdrank {
display:block;
background:transparent url(Images/Frisdrank.gif);
}
.frisdrank:hover{
background-image: url{images/Frisdrank1.gif;
}
.Wijnen {
display:block;
background:transparent url(Images/Wijnen.gif);
}
.Wijnen:hover{
background-image: url{images/Wijnen1.gif;
}

 

--

The .right CSS script is just for possitioning, when I drop it, it still doesn't work.

 

Hope someone knows what I'm doing wrong.. Trying to make it work for a couple of days now and still no succes at all..

Thanks in advance!

Why not just use CSS postioning for the hover state? For my websites I create the image at double the height (Normal image at the top with the hover image underneath). So say the image is now 100px wide by 200px tall, I would create the css as:

 

.frizdrank{

width: 100px;

height: 100px;

background-image: url("images/Frisdrank1.gif");

background-position: top center;

}

.frizdrank:hover{

background-position: bottom center;

}

 

This simply switches the background image quickly and effectively. Hope this helps

You can use Wayne's method or my personal favourite is to add the clickable image to the HTML and then in the CSS, overlay it with the the hover state (or vice-versa). Set the image opacity to 0 and on hover, bring the opacity to 1 - you can even use a transition to get a smooth fading effect.

Thanks, i've tried this but didn't work. Wasn't sure where the problem could be, but i've got a deadline so i made it just in HTML, for the ones who want to know:

 

<a href="http://google.nl" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Frisdrank','','Images/Frisdrank1.gif',1)"><img src="Images/Frisdrank.gif" alt="Frisdrank" name="Frisdrank" width="192" height="192" border="0" id="Frisdrank" /></a>

It looks like you are mixing Javascript with the CSS. Is this necessary? Why not just have the CSS and get rid of this:

 

 

onmouseover='thinkwithsatish.src="Images/Frisdrank1.gif" '

onmouseout='thinkwithsatish.src="Images/Frisdrank.gif"

if possible then could you please upload your code on server & share link here so we could assist you easily

 

Thanks

I cannot put the site online because it's not mine.. Can i do this on a different way here ?

Edited January 18, 201313 yr by Ptrckk