SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2005
    Location
    UK
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    pulsating image borders on hover

    Does anyone know if it's possible to alter the behavior of a (linked) image border on hover, such that the border changes on and off from one color to another, causing a sort of pulsating effect? Thanks for any ideas.

  2. #2
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could do this using javascript, and set the border color to different colors every second or so. But it would take some scripting...

    Gav


  3. #3
    SitePoint Enthusiast ada80ro's Avatar
    Join Date
    Apr 2005
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <title>Hello!</title>
    <script type="text/javascript">
    var i=0;
    var borderColors=['#993366','#0099CC','#00FFCC','#CCCC00'];
    
    
    function blinkBorder(){
    
       var imgRef=document.getElementById('linkBorder');
    
       imgRef.style.border='1px solid '+borderColors[i];
       if(++i==borderColors.length){
         i=0;
       }
       timeoutId=window.setTimeout('blinkBorder()',100);
    }
    </script>
    </head>
    <body>
    <a href="#"  onmouseover="blinkBorder();return false;" onmouseout='window.clearTimeout(timeoutId);'>
    <img src="img_name.jpg" width="300" height="275" id="linkBorder" />
    </a>
    </body>
    </html>

  4. #4
    SitePoint Enthusiast
    Join Date
    Jan 2005
    Location
    UK
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    thanks! but...!

    That looks great! - except.. how would I use it on multiple linked images on the same page?

    To explain - I have some PHP code which uses a foreach loop to write out a number of images on the same page, each of which are links to a larger version.

    I tried incorporating your code into the loop, but it only works on the first linked image (presumably because there's a conflict caused by many images therefore getting the same id?).

    Cheers!

  5. #5
    SitePoint Enthusiast ada80ro's Avatar
    Join Date
    Apr 2005
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok. Try this:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <title>Hello!</title>
    <script type="text/javascript">
    var i=0;
    var borderColors=['#993366','#0099CC','#00FFCC','#CCCC00'];
    
    function blinkBorder(aRef){
    
       var imgRef=aRef.getElementsByTagName('img')[0];//get the image inside the a tag
    
       imgRef.style.border='2px dashed '+borderColors[i];
       if(++i==borderColors.length){
         i=0;
       }
       timeoutId=window.setTimeout(function(){blinkBorder(aRef)},100);
    }
    </script>
    </head>
    <body>
    <a href="#" onmouseover="blinkBorder(this);return false;" onmouseout='window.clearTimeout(timeoutId);'>
    <img src="some_image.jpg" width="300" height="275" />
    </a>
    </body>
    </html>

  6. #6
    SitePoint Enthusiast
    Join Date
    Jan 2005
    Location
    UK
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    thanks.... but... (eek!)

    That works perfectly except for one thing (eek! should I ask!) - when you move the mouse away, you leave the current color border behind (ie, it stays there).. can it be tweaked so that only one color can ever be left showing after mouseout? (brilliant though and thanks tons!!)

  7. #7
    SitePoint Enthusiast ada80ro's Avatar
    Join Date
    Apr 2005
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here it is:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <title>Hello!</title>
    <script type="text/javascript">
    var i=0;
    var borderColors=['#993366','#0099CC','#00FFCC','#CCCC00'];
    
    function blinkBorder(aRef){
    
       var imgRef=aRef.getElementsByTagName('img')[0];//get the image inside the a tag
    
       imgRef.style.border='2px dashed '+borderColors[i];
       if(++i==borderColors.length){
         i=0;
       }
       timeoutId=window.setTimeout(function(){blinkBorder(aRef)},100);
    }
    
    function removeBlink(aRef){
       var imgRef=aRef.getElementsByTagName('img')[0];//get the image inside the a tag
       imgRef.style.border='2px dashed '+borderColors[0];//set to first color in the borderColors array but you can use any other color:e.g. imgRef.style.border='2px dashed #000"
    
       window.clearTimeout(timeoutId);//remove blinkBorder
    }
    </script>
    </head>
    <body>
    <a href="#" onmouseover="blinkBorder(this);" onmouseout='removeBlink(this);'>
    <img src="some_image" width="300" height="275" />
    </a>
    </body>
    </html>

  8. #8
    SitePoint Enthusiast
    Join Date
    Jan 2005
    Location
    UK
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thank you!

    That is just what I needed and it works perfectly! Many many thanks!


Bookmarks

Posting Permissions

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