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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Oct 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    onmouseover things

    my apologies for if I'm in the wrong direction with this, but due to the fact that I know nothing about this, I'm gonna ask it anyway.

    I'll use this image as an example for this situation;

    what I need:
    1: when I go over a name in the list (all names will be links), I want that person's picture to appear in the grey box.

    2: if I use this image as a page, how can I use a part of an image as a link? Example: if I want the text "contact" on this image, to link to contact.php or something.

    thanks.

  • #2
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    To use an image you would have to create an image map specific to that image.

    You can take a look at some basic examples here

    http://www.huntingground.freeserve.c...lus/imgmap.htm

    A simple script could then be used to change the images.

    PHP Code:
    <script language="javascript">
    <!--

    var 
    big_images = new Array("pic1.jpg","pic2.jpg","pic3.jpg")

    function 
    change_pic(n){
    document.bigpic.src=big_images[n]
    }

    // -->
    </script> 

    <a href="page1.php" onmouseover="change_pic(0)">Name1</a> <BR>
    <a href="page2.php" onmouseover="change_pic(1)">Name 2</a> <BR>
    <a href="page3.php" onmouseover="change_pic(2)">Name 3</a>

    <P><img name="bigpic" src=""> 
    Last edited by Mr J; 10-14-2005 at 07:35 PM.
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,524
    Thanks
    3
    Thanked 508 Times in 495 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    <!--
    var ImgPath='http://www.vicsjavascripts.org.uk/StdImages/';
    var ImgAry=new Array(['Zero.gif','ssss@bb.mm'],['One.gif','ssss@bb.mm'],['Two.gif','ssss@bb.mm'],['Three.gif','ssss@bb.mm'],['Four.gif','ssss@bb.mm'],['Five.gif','ssss@bb.mm']);
    var SRCAry=new Array();
    var EMailLk;
    
    for (i=0;i<ImgAry.length;i++){
     SRCAry[i]=new Image();
     SRCAry[i].src=ImgPath+ImgAry[i][0];
    }
    
    function SwapImg(Nu){
     document.getElementById('MyContact').style.visibility='visible';
     document.getElementById('MyImg').src=ImgPath+ImgAry[Nu][0];
     EMailLk=ImgAry[Nu][1];
    }
    
    function EMail(){
     window.top.location='mailto:'+EMailLk;
    }
    
    //-->
    </script>
    </a>
    </head>
    
    <body>
    <span onmouseover="SwapImg(0);" >Name 0</span><br>
    <span onmouseover="SwapImg(1);" >Name 1</span><br>
    <span onmouseover="SwapImg(2);" >Name 2</span><br>
    <span onmouseover="SwapImg(3);" >Name 3</span><br>
    <span onmouseover="SwapImg(4);" >Name 4</span><br>
    <span onmouseover="SwapImg(5);" >Name 5</span><br>
    <div style="position:absolute;top:20px;left:100px;width:100px;height:100px;" >
    <img id="MyImg" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" width="100" height="100" >
    <div id="MyContact" onclick="EMail();" style="position:absolute;visibility:hidden;top:5px;left:10px;width:100px;height:10px;font-size:12px;color:blue;text-decoration:underline;cursor:hand;cursor:pointer;" >Contact:
    </div>
    
    </div>
    
    </body>
    
    </html>

  • #4
    New to the CF scene
    Join Date
    Oct 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks a lot

    this would do very well


  •  

    Posting Permissions

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