...

View Full Version : image border on mouseover script



Jalenack
10-30-2004, 10:47 PM
hey...I want to add a 3px gold border to my mouseover script. When you mouseover on a link, the script places an image and a caption in a designated div. here's the script so far...

var pics = new Array()
//set your pictures url and descriptive texts below
pics[0]=['full/shadow1/5.jpg','"Clean Cut" Rosalyn, VA 2003'];
pics[1]=['full/shadow1/22.jpg','"Space and Time" San Francisco, CA 1983'];
pics[2]=['full/shadow1/1.jpg','"Negative Space on a Grid" Rosalyn, VA 2003'];
pics[3]=['full/shadow1/17.jpg','"S.F. Sky" San Francisco, CA 2003'];
pics[4]=['full/shadow1/2.jpg','"Sphere" Rosalyn, VA 2003'];
pics[5]=['full/shadow1/3.jpg','"D.C. Geometry" Washington, D.C. 2003'];
pics[6]=['full/shadow1/32.jpg','"Short Street" Brooklyn, MA 2001'];
pics[7]=['full/shadow1/33.jpg','"Clock Tower Highway" Lisbon, Portugal 2000'];
pics[8]=['full/shadow1/34.jpg','"Pyramid" San Francisco, CA 1986'];
pics[9]=['full/shadow1/4.jpg','"Windows 03" San Francisco, CA 2003'];
pics[10]=['full/shadow1/9.jpg','"Shapes Ascending a Staircase" Montreal, Canada 2001'];
pics[11]=['full/shadow1/25.jpg','"Intersections" San Francisco, CA 1979'];
//no need to modify below
function showH(n){
var oDiv=document.getElementById('pic');
oDiv.innerHTML='';
var ah=document.getElementById('lin').getElementsByTagName('a');
for(var i=0;i<ah.length;i++){
if(ah[i]==n){
var oPic=document.createElement('img');
oPic.setAttribute('src',pics[i][0]);
var oBr=document.createElement('br');
var oTxt=document.createTextNode(pics[i][1]);
oDiv.appendChild(oPic);
oDiv.appendChild(oBr);
oDiv.appendChild(oTxt);break
}
}
}



and the HTML:

<table cellpadding="0" cellspacing="10" id="lin">
<tr>
<td align="center">
<a href="#" onmouseover="showH(this)"><img src="thumbs/5.jpg"></a>
</td>
<td align="center">
<a href="#" onmouseover="showH(this)"><img src="thumbs/22.jpg"></a>
</td>
</tr>
<tr>
<td align="center">
<a href="#" onmouseover="showH(this)"><img src="thumbs/1.jpg"></a>
</td>





I'm using smaller thumbnails of each image as the link to create the larger image. I don't want borders on the thumbnails, just the large image produced by javascript. Any help much appreciated. I thought of a loophole in CSS and was able to sort create the desired effect, but it was incredibly inefficent. Thanx!

coothead
10-31-2004, 09:52 AM
Hi there Jalenack,

add this line -shown in green - to your script;...

var oPic=document.createElement('img');
oPic.setAttribute('src',pics[i][0]);
oPic.setAttribute('id','img_brdr');
...and place this snippet of css within the head section...

<style type="text/css">
<!--

#img_brdr {
border:solid 3px #ffd700;
}

//-->
</style>

coothead



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum