...

View Full Version : Rollover program with captions making me crazy!



triciabb0618
02-20-2007, 05:51 AM
Hi, newbie here, rollover program with captions is making me crazy!

Any help would be appreciated. Here's what I got

Hi, my name is Trish, and I'm trying to get this routine working. Any suggestions? Any help would be appreciated.

Thanks. Trish


<HTML>
<HEAD>
<style type="text/css">
.pos_right
{
position: relative;
left:120px; bottom: 186px;
}

</style>
<script type="text/javascript" src="rollovercaption.js">
</script>

</HEAD>
<BODY link=black alink=black vlink=black>
Roll mouse over thumbnail for larger picture<BR><BR>
<A HREF="javascript:void(0)"
onmouseover="document.images.large.src='ring1large.jpg'"
onmouseout="document.large.src='space.jpg'" >
<IMG SRC="ring1.jpg" border=1 bordercolor="black" ALT=" "> </a>
<br><p align=center id="caption">caption1</p>
<A HREF="javascript:void(0)"
onmouseover="document.images['large'].src='ring2large.jpg'"
onmouseout="document.images['large'].src='space.jpg'">
<IMG SRC="ring2.jpg" border=1 bordercolor="black" ALT=" "> </a><br>

<A HREF="javascript:void(0)"
onmouseover="document.images['large'].src='ring3large.jpg'"
onmouseout="document.images['large'].src='space.jpg'">
<IMG SRC="ring3.jpg" border=1 bordercolor="black" ALT=" "> </a><br>

<A HREF="javascript:void(0)"
onmouseover="document.images['large'].src='ring4large.jpg'"
onmouseout="document.images['large'].src='space.jpg'">
<IMG SRC="ring4.jpg" border=1 bordercolor="black" ALT=" "> </a><br>

<BR><BR>
<IMG SRC="space.jpg" class= "pos_right" ALT=" " NAME="large" >


</BODY>
</HTML>



rollovercaption.js follows:

<style language="JavaScript" type="text/javascript">
if (document.images) {
image0= new Image;
image1= new Image;
image2= new Image;
image3= new Image;
image0.src='ring1large.jpg';
image1.src='ring2large.jpg';
image2.src='ring3large.jpg';
image3.src='ring4large.jpg';
document.large="";
}
var cap=['Picture One', 'Second Picture', 'Three'];
function rollover(n){
document.large.src=window['image'+n].src;
document.getElementById('caption').inner.HTML=cap[n];
}



</script>

Thanks much!

Trish

vwphillips
02-20-2007, 08:30 AM
try(untested)


<HTML>
<HEAD>
<style type="text/css">
.pos_right
{
position: relative;
left:120px; bottom: 186px;
}

</style>
<script language="JavaScript" type="text/javascript">
<!--

var cap=['Picture One', 'Second Picture', 'Three',''];


function Swap(zxcid,img,capid,capt){
if (document.getElementById(zxcid)&&img){
document.getElementById(zxcid).src=img
}
if (document.getElementById(capid)&&capt){
document.getElementById(capid).innerHTML=capt;
}
}

//-->
</script>



</script>

</HEAD>
<BODY link=black alink=black vlink=black>
Roll mouse over thumbnail for larger picture<BR><BR>
<IMG SRC="ring1.jpg" border=1 bordercolor="black" ALT=" "
onmouseover="Swap('large','ring1large.jpg','caption',cap[0]);"
onmouseout="Swap('large','space.jpg','caption',cap[2]);" >

>
<br><p align=center id="caption">caption1</p>

<IMG SRC="ring2.jpg" border=1 bordercolor="black" ALT=" "
onmouseover="Swap('large','ring2large.jpg','caption',cap[3]);"
onmouseout="Swap('large','space.jpg','caption',cap[2]);">

><br>

<IMG SRC="ring3.jpg" border=1 bordercolor="black" ALT=" "
onmouseover="Swap('large','ring3large.jpg','caption',cap[1]);"
onmouseout="Swap('large','space.jpg','caption',cap[0]);">

><br>

<IMG SRC="ring4.jpg" border=1 bordercolor="black" ALT=" "
onmouseover="Swap('large','ring4large.jpg','caption',cap[0]);"
onmouseout="Swap('large','space.jpg','caption',cap[3]);">

>
<br>

<BR><BR>
<IMG SRC="space.jpg" class= "pos_right" ALT=" " id="large" >
<div id="caption" ></div>

</BODY>
</HTML>

triciabb0618
02-20-2007, 03:50 PM
Wow, thank you, you're a life-saver. Code works great!

Tricia



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum