PDA

View Full Version : rollover image able to be a link?



Alendrin
Feb 11th, 2010, 12:50 PM
Hi all, this is my first post and i hope you can help.

what i have is an image then on hover another image is displayed....now is there any way that the second image can become a link?...struggling to find an easy way of doing it if there is one.

i remember doing something similar basically i hid text on top of the image but it wasn't great and was just thinking if there was an easier way.

thanks
Alendrin

ahallicks
Feb 11th, 2010, 01:13 PM
So you want the main image not to be a link, but when someone hovers over you want it to be a link?

Why not just make the image a link, then your link will be attached to the image as there is no circumstance that someone will see the rolled over image without being able to click it?



<a href="" title="" id="rolloer">
<img src="" alt="" />
</a>


How are you adding a hover effect to the image? If you are doing it in javascript using the psuedo :hover then it won't work in IE anyway. You'd be better off setting a background image on the anchor tag like so:



<a href="" title="" id="rolloer">
My Rollover
</a>
a#rollover [
background-image: url(/blah/blah.jpg);
display: block;
width: 100px;
height: 100px;
text-indent: -9999px;
overflow: hidden; /* To hide the outline stretching off the page */
}

Alendrin
Feb 11th, 2010, 01:40 PM
I'm using CSS for the images

html

<div id = "quote" ></div>


CSS

#quote{
position:absolute;
height: 120px;
width: 200px;
margin: 0;
padding: 0;
background-image:url(QUOTES2.gif);
left: 150px;
top: 562px;

}



#quote:hover{
background-image:url(QUOTES3.gif);
}

ahallicks
Feb 11th, 2010, 03:00 PM
Yeah, you need to change the div for an anchor and add the href. The :hover pseudo class should not be applied to anything other than anchors because of the lack of support in older browsers.

Change your HTML to:



<a href="/path/to/link" title="Title For Link" id="quote">Your Quote</a>


And your CSS to:



a#quote{
display: block;
position:absolute;
height: 120px;
width: 200px;
margin: 0;
padding: 0;
background-image:url(QUOTES2.gif);
left: 150px;
top: 562px;
text-indent: -9999px;
overflow: hidden;
}

a#quote:hover{
background-image:url(QUOTES3.gif);
}


I'd warn against the use of absolute positioning too as it can be a nightmare to handle.

Alendrin
Feb 11th, 2010, 03:11 PM
Thanks dude, i managed to figure it out....i forgot dreamweaver can basically do it for me by inserting images it gave me the option for rollovers etc...just removed the images away from the CSS page....been a while since i've done any of this stuff.

ahallicks
Feb 11th, 2010, 03:52 PM
Thanks dude, i managed to figure it out....i forgot dreamweaver can basically do it for me by inserting images it gave me the option for rollovers etc...just removed the images away from the CSS page....been a while since i've done any of this stuff.

Yay, more fantastic Dreamweaver MM code! It will be javascript, so just be aware that users without javascript will not see the rollover effect

Alendrin
Feb 12th, 2010, 12:44 PM
On looking at the mess javascript created....i've adopted your approach many thanks :)

Excavator
Feb 12th, 2010, 05:01 PM
Hello Alendrin,
Have a look at a demo I have of a CSS Rollover (http://nopeople.com/CSS/CSS_rollover/index.html), might give you some more ideas.

Major Payne
Feb 13th, 2010, 08:32 AM
And another idea:


p#image { width: 150px; margin: 0 auto; }

p.image2 a img { border: 0; }



<p id="image" class="image2"><a href="http://Google.com/"><img src="http://img233.imageshack.us/img233/4195/anierrorchickenvocalspx5.gif" onmouseover="this.src='http://img149.imageshack.us/img149/1023/anierrorchickenguitarum3.gif'" onmouseout="this.src='http://img233.imageshack.us/img233/4195/anierrorchickenvocalspx5.gif'" title="Google" alt="" /></a></p>

Always more than one way. :D