Image Hover which links to page problem - CSS forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

Image Hover which links to page problem

tetsuo3

1:33 pm on Jun 2, 2012 (gmt 0)

10+ Year Member

Hi,

Basically I want something like this...http://www.devirtuoso.com/Examples/CSS-Image-Viewer/.

The only difference is how the images appear and hover.

I basically want the images to change on hover, not when clicked. Then when clicked I want it to go to a different page.

I wondered if anybody could help me.

I remember a while ago I could do something where by you hover over an image somewhere on the page, and it would pop up another image on the page. I'm not talking over the original like a link, but anywhere I want. Could someone share any light or link to any articles online? I'm having trouble finding information.

The only other example I've found is this ...

[livepipe.net...]

But I swear you can do it without being so complicated like that.

***

Basically... this is what I want to do.

[img27.imageshack.us...]

Where you see the grey slightly transparent boxes over the image on the background. I want it so when you hover over those the bg image changes. Those grey boxes will eventually have wording in them and when you hover over that particular word the background image changes to a picture that has something to do with that word.

I still would like the grey boxes to stay on top though, but the image to change (currently a pcb).

At the moment it's just a div with an image background written in the css. The grey boxes are in the html as linked images (so when they are clicked they visit another page).

legaleagle

11:21 pm on Jun 5, 2012 (gmt 0)

10+ Year Member

You can do this very easily with some javascript ie.


<a href="example.html" OnMouseOver = "document.images.example.src= 'example-hover.jpg'" OnMouseOut ="document.images.example.src='example.jpg'" ><img src="example.jpg" alt="example" name="example" /></a></p>

Tzakuk

3:52 pm on Jun 6, 2012 (gmt 0)

10+ Year Member

You could use something like this:

<head>
<script type="text/javascript">

function alternateImage() {
document.getElementById("yourImageID").src = "alternateImage.jpg";
}
function defaultImage() {
document.getElementById("yourImageID").src = "yourDefaultImage.jpg";
}

</script>
</head>

<body>
<a href="#" onmouseover="alternateImage();" onmouseout="defaultImage();" ><img id="yourImageID" src="yourDefaultImage.jpg" /></a>
</body>

alt131

1:45 pm on Jun 8, 2012 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Hi tetsuo3, you are right this does not need to be that complicated, and if I understand what you want correctly, you don't need javascript to achieve this. What I think you want is a type of image change on hover. Check out the photo galleries at stu nicholls for lots of working examples.

What you have sounds like a list of links. so rather than using a div, mark it up using an unordered list. Make the <ul> the dimensions of the images that will change on hover. (You can also set a default background-image for when users enter the page.) Put the image that will show on hover inside the <a>, then hide it. Then make it visible on hover. The following code should give you a start:

HTML
<ul>
<li><a href="#">Word 1<img src="image1.jpg" alt="" ></a></li>
<li><a href="#">Word 2<img src="image2.jpg" alt=""></a></li>
<li><a href="#">Word 3<img src="image3.jpg" alt=""></a></li>
</ul>

CSS
ul {
list-style-type:none;
padding:0;
/*The dimensions of the images */
height:500px;
width:500px;
background-image:url(image.jpg);
/*make the menu relative so the images take their position from here*/
position:relative;
/*explicitly setting z-index allows you to control the value for the child elements so you can display the image above the default background, but behind the link */
z-index:1;
}

li {
padding:0;
}

a {
/* style the links */
width:45%;
margin:1em;
padding:1em;
display:block;
background-color:#ddd;
}

a img {
/* hide the image until a hover - */
visibility:hidden;
/* make it small so it takes up no space */
height:0;
width:0;
/*set the position for when it is hovered */
position:absolute;
top:0;
left:0;
}

/* style the link on hover */
a:hover {
background-color:#eee
}

/* make the image visible on hover */
a:hover img {
height:500px;
width:500px;
z-index:-1;
visibility:visible;
}