...

View Full Version : onmouseover things



Tekano
10-14-2005, 07:51 PM
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 (http://www.all4ulyrics.com/bla/selectiev1.gif) 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.

Mr J
10-14-2005, 08:29 PM
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

www.huntingground.freeserve.co.uk/webplus/imgmap.htm

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


<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="">

vwphillips
10-14-2005, 08:42 PM
<!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>

Tekano
10-14-2005, 09:44 PM
thanks a lot :)

this would do very well :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum