Aqua-Soft Forums: Rollover Image Swapping - Aqua-Soft Forums

Jump to content

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

Rollover Image Swapping Rate Topic: -----

#1 User is offline   Link Icon

  • Group: Member
  • Posts: 322
  • Joined: 14-July 03

Posted 18 January 2008 - 02:40 AM

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

Attached File(s)


0

#2 User is offline   davidsword Icon

  • Group: Subscribers
  • Posts: 1,016
  • Joined: 19-December 06

Posted 18 January 2008 - 12:29 PM

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
0

#3 User is offline   Link Icon

  • Group: Member
  • Posts: 322
  • Joined: 14-July 03

Posted 18 January 2008 - 12:45 PM

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.
0

#4 User is offline   davidsword Icon

  • Group: Subscribers
  • Posts: 1,016
  • Joined: 19-December 06

Posted 18 January 2008 - 12:58 PM

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="java script://" 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="java script://" onMouseOver="showSec(2)">Show Layer 2</a>

<a href="java script://" onMouseOver="showSec(3)">Show Layer 3</a>

<a href="java script://" onMouseOver="showSec(4)">Show Layer 4</a>



</body>
</html>

0

#5 User is offline   Link Icon

  • Group: Member
  • Posts: 322
  • Joined: 14-July 03

Posted 18 January 2008 - 01:16 PM

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:
0

#6 User is offline   davidsword Icon

  • Group: Subscribers
  • Posts: 1,016
  • Joined: 19-December 06

Posted 18 January 2008 - 01:38 PM

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..
0

#7 User is offline   rick22 Icon

  • Group: Member
  • Posts: 14
  • Joined: 28-February 08

Posted 01 March 2008 - 10:46 AM

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

#8 User is offline   Smaky Icon

  • Group: Member
  • Posts: 586
  • Joined: 19-April 08

Posted 05 May 2008 - 01:50 AM

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.
0

#9 User is offline   Jeter2Fan93 Icon

  • Group: Subscribers
  • Posts: 140
  • Joined: 21-December 07

Posted 06 May 2008 - 03:55 PM

Like this?

http://darwingimp.sourceforge.net/
0
Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic