Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    May 2004
    Location
    Berkeley, California Age: 15
    Posts
    398
    Thanks
    0
    Thanked 0 Times in 0 Posts

    image border on mouseover script

    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!

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,699
    Thanks
    0
    Thanked 233 Times in 228 Posts
    Hi there Jalenack,

    add this line -shown in green - to your script;...
    Code:
    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...
    Code:
    <style type="text/css">
    <!--
    
    #img_brdr {
          border:solid 3px #ffd700;
     }
    
    //-->
    </style>
    coothead


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •