PDA

View Full Version : Changing Image while hovering link



bamenny
Mar 4th, 2011, 02:50 AM
Hi,

I have an image on one div (not background)
and list of links on another.

I want to change the image whenever the user hovers a link.

Need urgent help in understanding what's the easiest way to achieve that?

best regards,
me.

bamenny
Mar 4th, 2011, 02:56 AM
And would it be easier if it was a backgound image?

Excavator
Mar 4th, 2011, 03:05 AM
Hello bamenny,
If you make your hovered images the background of a span for each link it's pretty easy. Have a look at a demo that might give you some ideas - disjointed rollover (http://nopeople.com/CSS%20tips/disjointed_rollover/index.html)

bullant
Mar 4th, 2011, 03:16 AM
I have an image on one div (not background)
and list of links on another.


I am assuming this means you have 2 divs: - 1 for the links and the other to display the link's image

Maybe use this modified demo from a similar question as a guide.

This demo has a link for each image in one div and when you hover over the link, its image is displayed in another div.

just insert your own image names in the picData array.

btw - since this is urgent, I hope you get your homework in on time ;)



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#linksCont {
clear: both;
}
#linksCont a{
display: block;
width: 120px;
}
#imgEnlargeContainer {
width: 50%;
float: left
}
#descContainer {
width: 50%;
float: right
}
</style>
<script type="text/javascript">
//preload the images
var picData = [
['num1.jpg','description 1'],
['num2.jpg','description 2'],
['num3.jpg','description 3'],
['num4.jpg','description 4'],
['num5.jpg','description 5']
];
picO = new Array();
for(i=0; i < picData.length; i++){
picO[i] = new Image();
picO[i].src = picData[i][0];
}
function swapImage(picNum){
imgEnlargeO.src = picO[picNum].src;
descContainerO.innerHTML = picData[picNum][1];
}
window.onload=function(){
//create the links
oLinksCont = document.getElementById('linksCont');
for(i=0; i < picO.length; i++){
oA = document.createElement('a');
oA.href = '';
oA.innerHTML = 'Show image '+(i+1);
oA.num = i;
oA.onmouseover=function(){
swapImage(this.num);
}
oLinksCont.appendChild(oA);
}
imgEnlargeO = document.getElementById('imgEnlarge');
descContainerO = document.getElementById('descContainer');
imgEnlargeO.src = picO[0].src;
}
</script>
</head>
<body>
<div id="enlargeContainer">
<div id="imgEnlargeContainer">
<img id="imgEnlarge" src="" alt="" />
</div>
<div id="descContainer"></div>
</div>
<div id="linksCont"></div>
</body>
</html>

izrafel
Mar 4th, 2011, 04:57 AM
if you're in a hurry maybe javascript is quicker instead of using css

bamenny
Mar 4th, 2011, 06:20 AM
Thanks!!!! ;)
Great forum!