www.webdeveloper.com
Results 1 to 5 of 5

Thread: image popup while rolling (hovering) over text

  1. #1
    Join Date
    Jul 2006
    Posts
    2

    image popup while rolling (hovering) over text

    Im making an employee roster in HTML... I want to be able to rollover (hover) on the employees name (text) and have an image come up, next to the mouse (floating on the screen) when I rollover someone elses name do the samething... when Im not over anyones name I dont want any images there.

    Please advise!

    Thanks...

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,662
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <script>
    
    function AddImgSwap(){
     var spns=document.getElementsByTagName('A');
     for (var zxc0=0;zxc0<spns.length;zxc0++){
      spns[zxc0].onmouseover=function(){
       var img=document.getElementById('fred');
       var newsrc=this.className.replace('zxc','');
       img.src=img.src.replace('Blank',newsrc)
       img.style.left=(zxcPos(this)[0]+100)+'px';
       img.style.top=(zxcPos(this)[1]-50)+'px';
       img.style.visibility='visible';
      }
      spns[zxc0].onmouseout=function(){
       var img=document.getElementById('fred');
       var newsrc=this.className.replace('zxc','');
       img.src=img.src.replace(newsrc,'Blank')
       img.style.visibility='hidden';
      }
     }
    }
    
    function zxcPos(zxcobj){
     zxclft=zxcobj.offsetLeft;
     zxctop=zxcobj.offsetTop;
     while(zxcobj.offsetParent!=null){
      zxcpar=zxcobj.offsetParent;
      zxclft+=zxcpar.offsetLeft;
      zxctop+=zxcpar.offsetTop;
      zxcobj=zxcpar;
     }
     return [zxclft,zxctop];
    }
    
    
    </script>
    </head>
    
    <body onload="AddImgSwap()">
    <img id="fred" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" width="100" height="100" style="position:absolute;visibility:hidden;" >
    <br>
    <br>
    <br>
    <br>
    <a class="zxcOne" >Name 1</a>
    <br>
    <br>
    <br>
    <br>
    <a class="zxcTwo" >Name 2</a>
    
    </body>
    
    </html>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Jul 2006
    Posts
    2
    This is almost what I want to do... I wanted it to come off the mouse pointer though! I will have about 100 names in a excel spreadsheet (columns, rows) format

  4. #4
    Join Date
    Apr 2009
    Posts
    77

    Talking Thanks!

    vwphillips,

    Just posting here to say thanks! I had to adapt your solution a bit.. but without your jumpstart I would have spent many hours getting up to speed.
    Thank you!

    -Govinda

  5. #5
    Join Date
    Nov 2005
    Location
    India
    Posts
    336
    It helps. Thnx for the code

    But I doubt the code breaks if its inside a div with say 500px and overflow:auto. In this case the mouse coordinates with respect to the element will be wrong.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles