homepage Welcome to WebmasterWorld Guest from 54.242.18.232
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Image Hover which links to page problem
tetsuo3




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

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




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

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




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

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




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

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;
}

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved