View Full Version : image border on mouseover script

10-30-2004, 11: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');
var ah=document.getElementById('lin').getElementsByTagName('a');
for(var i=0;i<ah.length;i++){
var oPic=document.createElement('img');
var oBr=document.createElement('br');
var oTxt=document.createTextNode(pics[i][1]);

and the HTML:

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

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!

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

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

var oPic=document.createElement('img');
...and place this snippet of css within the head section...

<style type="text/css">

#img_brdr {
border:solid 3px #ffd700;