Aqua-Soft Forums

Rollover Image Swapping

I wasn't entirely sure what I was asking for (I'd assume a combination of CSS and javascript would be involved. So rather than being too confusing, I just made a picture to get the point across. :)

I'm redesigning my website, and what I'm looking to do is have a thumbnail with a basic CSS rollover to change the thumbnail but at the same time, I want it to automatically change a separate image (which I assume would be javascript) upon being rolled over. So I'm looking to all of you for help on how to approach doing this.

Thanks in advance! :D

post-2140-1200624044_thumb.jpg

sample.jpg
sample.jpg

#488235

for the example its all text but this should help you;

http://davidsword.ca/showhide.html

edit sorry, i didnt see that you wanted the rollover on the thumb as well... :S

#488269

That's exactly what I was looking for! Two questions though.

1) Is there a way to make it revert back to the original default image when none of the associated images are being hovered over?

2) Am I allowed to have the links themselves link to whatever I want?

Edit: I've already got the thumbnail rollovers coded with CSS. I just have to apply the separate image swap to them.

#488272

1) yes. but you'll have to make a mouseover linked div layer before the thumbnail (make sure its not wrapped around the thumbnails) with the dimensions of the thumbnail area, I've added a 'hide all' option below so you can mess around with that

2) yes. just change java script:// to whatever,

(I've included the new stuff below because i cant re-upload to my site right now, ill attach it in a bit.)

<html>
<head>




<style>
#sec1 {position: absolute; top: 40px; left:225px; visibility:hidden; z-index: 100; background-color:Khaki;}
#sec2 {position: absolute; top: 40px; left:225px; visibility:hidden; z-index: 200; background-color:Gainsboro;}
#sec3 {position: absolute; top: 40px; left:225px; visibility:hidden; z-index: 300; background-color:PaleTurquoise;}
#sec4 {position: absolute; top: 40px; left:225px; visibility:hidden; z-index: 400; background-color:Bisque;}
xmp {color:blue; background-color:PowderBlue;} 
</style>
<script>
ns4 = (document.layers) ? true:false //required for Functions to work 
ie4 = (document.all) ? true:false //required for Functions to work 
ng5 = (document.getElementById) ? true:false //required for Functions to work 

function hideSec() { 
if (ng5) document.getElementById('sec1').style.visibility = "hidden" 
else if (ns4) document.sec1.visibility = "hide" 
else if (ie4) sec1.style.visibility ="hidden" 

if (ng5) document.getElementById('sec2').style.visibility = "hidden" 
else if (ns4) document.sec2.visibility = "hide" 
else if (ie4) sec2.style.visibility ="hidden" 

if (ng5) document.getElementById('sec3').style.visibility = "hidden" 
else if (ns4) document.sec3.visibility = "hide" 
else if (ie4) sec3.style.visibility ="hidden" 

if (ng5) document.getElementById('sec4').style.visibility = "hidden" 
else if (ns4) document.sec4.visibility = "hide" 
else if (ie4) sec4.style.visibility ="hidden" 
} 

function showSec(n) { 
hideSec(); 
if (ng5) document.getElementById('sec' + n).style.visibility = "visible"; 
else if (ns4) document.layers["sec" + n].visibility = "show"; 
else if (ie4) document.all["sec" + n].style.visibility = "visible"; 
}
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
	var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
	if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
	d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

function hideAllSec(n) { 
if (ng5) document.getElementById('sec' + n).style.visibility = "hidden"; 
else if (ns4) document.layers["sec" + n].visibility = "hide"; 
else if (ie4) document.all["sec" + n].style.visibility = "hidden"; 
} 
</script>


</head>
<body>

<div id="sec1">1</div> 
<div id="sec2">2</div> 
<div id="sec3">3</div> 
<div id="sec4">4</div>




<a href="../../unavailable.html" onMouseOver="hideAllSec(1),hideAllSec(2),hideAllSec(3),hideAllSec(4)">Hide All</a>





<a href="http://google.ca/" onMouseOver="showSec(1)">Show Layer 1</a>

<a href="../../unavailable.html" onMouseOver="showSec(2)">Show Layer 2</a>

<a href="../../unavailable.html" onMouseOver="showSec(3)">Show Layer 3</a>

<a href="../../unavailable.html" onMouseOver="showSec(4)">Show Layer 4</a>



</body>
</html>

#488274

I almost looked through it started scratching my head, but I think I've finally done enough coding to actually understand what most of that means without being intimidated by it. haha

I'm not too sure about the reverting to the default image thing. Could I apply some sort of "onmouseoff" command to each link that would initially revert to the first image if not being overidden by hovering over another thumbnail?

Other than that, everything should work, I just gotta adapt a lot of stuff and make it work for 17 different things! When it's done though it'll be extremely cool.

My only qualm is whether to continue working on it now or actually go to sleep.:mad:

#488277

good call, onMouseOut="hideAllSec(1),hideAllSec(2),hideAl ... " would work too and makes more scene.

Also, writing in php could reduce redundancy if your doing it on 17+ items and, be aware that all these images load once the page loads which if 17+ could slow your load time drastically..

#488280

i didnt understand that what exactly do you want...? can you give an example?

#493302

I think you mean something like:

w w w.ajegroup.com/web/ajegroup/products.jsp

(Sorry for the formatting I can not embed a link yet)

If so, send me a PM and so I can send you a bit of code.

#499614

Like this?

http://darwingimp.sourceforge.net/

#499773