...

View Full Version : How to change a link destination via a mouseover??



lllusion
10-21-2005, 02:07 PM
What I have:

1. A table containing an image that gets swapped out when the user mouseovers various preview images


<table>
<tr>
<td><img src="images/image1.jpg" name="target" id="target"></td>
</tr>
</tr>
</table>


2. A link that causes the target image in the table above to change image.
The link also opens a window with a larger version of the image.


<a href="javascript:;"
onmouseover="MM_swapImage('target','','images/image2.jpg',1)"
onclick="openPictureWindow('jpg','images/image2.jpg',660,440,'image2','0','0')">
<IMG id=1s src="images/image2.jpg" name=1s>
</a>


3. The code for doing the swap.


function MM_swapImgRestore() { //v3.0
var g,x,a=document.MM_sr; for(g=0;a&&g<a.length&&(x=a[g])&&x.oSrc;g++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var g,j=d.MM_p.length,a=MM_preloadImages.arguments; for(g=0; g<a.length; g++)
if (a[g].indexOf("#")!=0){ d.MM_p[g]=new Image; d.MM_p[g++].src=a[g];}}
}

function MM_findObj(n, d) { //v3.0
var p,g,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (g=0;!x&&g<d.forms.length;g++) x=d.forms[g][n];
for(g=0;!x&&d.layers&&g<d.layers.length;g++) x=MM_findObj(n,d.layers[g].document); return x;
}

function MM_swapImage() { //v3.0
var g,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(g=0;g<(a.length-2);g+=3)
if ((x=MM_findObj(a[g]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[g+2];}
}


4. The code for opening the window with the larger version of the image.


function openPictureWindow(imageType,imageName,imageWidth,imageHeight,alt,posLeft,posTop)
{
newWindow = window.open("","newWindow","width="+imageWidth+",height="+(imageHeight+56)+",scrollbars=no,left="+(posLeft+240)+",top="+(posTop+120));
newWindow.document.open();
newWindow.document.write('<html>\n<title>'+alt+'</title>\n');
newWindow.document.write('<body bgcolor="#000000" leftmargin="0" topmargin="0" marginheight="0" marginwidth="0">\n');
newWindow.document.write('<div align="center">\n');
newWindow.document.write('<table width='+imageWidth+' height='+(imageHeight+56)+'>\n');
newWindow.document.write('<tr>\n<td align="center valign="top"">');
newWindow.document.write('<img src=\"'+imageName+'\" width='+imageWidth+' height='+imageHeight+' alt=\"'+alt+'\">\n');
newWindow.document.write('</td>\n</tr>\n');
newWindow.document.write('</table>\n</div>\n');
newWindow.document.write('</body>\n</html>\n');
newWindow.document.close();
newWindow.focus();

}



What I want to do:
1. make the currently viewed target image in the table at the top linkable to open a page (hopefully using the same openPictureWindow script as is in the image2 link) that contains the currently viewed image, i.e.- image2.

2. make a completely separate image also linkable to open a page (hopefully using the same openPictureWindow script as is in the image2 link) that contains the currently viewed image, i.e.- image2. They key here is that I don't want to change this image, just the way it links.


How do I do this?!?
TIA!

Kor
10-21-2005, 04:16 PM
oh... not those Mikey Mouse codes again!. The codes generated by any application (and Macromedia's mainly) are impossible to be followed, intricate, repeatable and, sometimes, even incorrect.

If you want really to enter this brach, learn and build your javascript codes alone. By hand.

lllusion
10-22-2005, 12:48 PM
Ok. so ignore the code I have. I only provided it in case someone needed the background info about what I currenlty have going on.

The issue still remains this:
How do I make the href of a link change based on the mouseover of a different object?

i.e.
object 1: links to page1.htm
object 2: links to page2.htm

Action:
User rolls over object2
User can now click on EITHER object 1 OR object 2 and still get to page2.htm

The end result being that if there are 7 objects, the user can rollover and click on any of the objects and get to the respective page. AND after the user rolls over any of these objects, clicking on object 1 will take the user to the page associated with the last mouseovered object.

coothead
10-22-2005, 02:34 PM
Hi there lllusion,

obviously this cannot be done with onmouseover as you can only click the image that you mouseover. :)
So it will have to be done using onmouseout.
have a look at this working example...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>mouseout href change</title>
<base href="http://coothead.homestead.com/files/"/>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
<meta name="Content-Script-Type" content="text/javascript"/>
<meta name="Content-Style-Type" content="text/css"/>

<style type="text/css">
<!--
body {
background-color:#999;
}
#container {
width:732px !important;
width:736px;
height:572px;
padding:2px;
background-color:#ddd;
border:3px double #000;
margin:auto;
}
#container img {
display:block;
float:left;
border:1px solid #000;
margin:2px;
}
#info, h5 {
text-align:center;
}
#info input {
width:200px;
}
-->
</style>

<script type="text/javascript">
<!--
function swapHref(n) {
var urls=new Array();
urls[0]='http://www.codingforums.com';
urls[1]='http://www.google.com';
urls[2]='http://www.yahoo.com';
urls[3]='http://www.w3schools.com';
var anc=document.getElementsByTagName('a');

for(i=0;i<anc.length;i++) {
if(anc[i].className=='link') {
anc[i].href=urls[n];
document.forms[0][0].value=urls[n];
}
}
}

//-->
</script>

</head>
<body onload="document.forms[0][0].value='http://www.codingforums.com'">

<h5>this is the link to which a click - on any image - will send you</h5>

<form action="#">
<div id="info">
<input type="text"/>
</div>
</form>

<div id="container">
<a class="link" href="http://www.codingforums.com" onmouseout="swapHref(0)">
<img src="apple0.jpg" alt=""/>
</a>
<a class="link" href="http://www.codingforums.com" onmouseout="swapHref(1)">
<img src="apple1.jpg" alt=""/>
</a>
<a class="link" href="http://www.codingforums.com" onmouseout="swapHref(2)">
<img src="apple2.jpg" alt=""/>
</a>
<a class="link" href="http://www.codingforums.com" onmouseout="swapHref(3)">
<img src="apple3.jpg" alt=""/>
</a>
</div>

</body>
</html>
Note:- the form input has only been added so that you can check the urls and can be removed, as can the highlighted line in the script. :)
reason for edit:- error in form handling

coothead

lllusion
10-22-2005, 04:04 PM
Thanks so much for your help coothead! It's very much appreciated!

I think we're really close here. However, I don't want to change the actual link of each apple. I want to change the link of a separate apple.

Check out this working example...
...it's point ii. in this example that I don't know how to make happen.

... what i need is a function 'readHref' that reads the value of the urls from swapHref. the function will be called from an onmouseover AND/OR onmousedown for the a tag around the large apple image so that its href is equal to the last mouseovered apple.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>mouseout href change</title>

<base href="http://coothead.homestead.com/files/"/>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
<meta name="Content-Script-Type" content="text/javascript"/>
<meta name="Content-Style-Type" content="text/css"/>

<style type="text/css">
<!--
body {
background-color:#999;
}
#container {
width:732px !important;
width:736px;
height:572px;
padding:2px;
background-color:#ddd;
border:3px double #000;
margin:auto;
}
#container img {
display:block;
float:left;
border:1px solid #000;
margin:2px;
}
#info, h5 {
text-align:center;
}
#info input {
width:200px;
}
-->
</style>

<script type="text/javascript">
<!--
function swapHref(n) {
var urls=new Array();
urls[0]='apple0.jpg';
urls[1]='apple1.jpg';
urls[2]='apple2.jpg';
urls[3]='apple3.jpg';
var anc=document.getElementsByTagName('a');

for(i=0;i<anc.length;i++) {
if(anc[i].className=='link') {
anc[i].href=urls[n];
document.forms[0][0].value=urls[n];
}
}
}

//-->
</script>

<!--Start of script that reads the value of the urls from swapHref-->
<script type="text/javascript">
<!--
function readHref(n) {

}

//-->
</script>
<!--End of script that reads the value of the url from swapHref-->

<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v3.0
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>

</head>
<body>

<!--Start of visual aid-->
<h5>this is the link to which a click - on the <span style="font-weight: 400">LARGE</span> apple image - will send you</h5>
<form action="#">
<div id="info">
<input type="text" value="apple0.jpg" size="20"/>
</div>
</form>
<!--End of visual aid-->

<br><br>
<div align="left">
<table border="0" cellpadding="0" cellspacing="0" width="600" height="50">
<tr>
<td>This apple should reflect <font size="3"><b><u>TWO</u></b> things,</font>
<ol type="i">
<li>it should show the image of the apple that IS BEING or HAS JUST BEEN moused over</li>
<li>it should link to the apple that HAS JUST BEEN moused over</li>
</ol>
</td>
</tr>
</table>
</div>

<!--Image that changes appearance AND its link value-->
<p align="left">

<!--**** what i need here is an onmouseover AND/OR onmousedown function readHref that reads the value of the urls from swapHref and uses it for the href value****-->
<a href="apple0.jpg" target="_blank">
<img src="apple0.jpg" alt="" border="0" width="360" height="280" name="target" id="target"/>
</a>
</p>
<!--End of Image that changes appearance AND its link value-->

<br><br>

<!--Start rollover links-->
<p align="left">
<a class="link" href="apple0.jpg" target="_blank"
onmouseout="swapHref(0)"
onmouseover="MM_swapImage('target','','apple0.jpg',1)"><img src="apple0.jpg" width="84" height="66"/></a>
<a class="link" href="http://coothead.homestead.com/files/apple1.jpg" target="_blank"
onmouseout="swapHref(1)"
onmouseover="MM_swapImage('target','','apple1.jpg',1)"><img src="apple1.jpg" width="84" height="66"/></a>
<a class="link" href="http://coothead.homestead.com/files/apple2.jpg" target="_blank"
onmouseout="swapHref(2)"
onmouseover="MM_swapImage('target','','apple2.jpg',1)"><img src="apple2.jpg" width="84" height="66"/></a>
<a class="link" href="http://coothead.homestead.com/files/apple3.jpg" target="_blank"
onmouseout="swapHref(3)"
onmouseover="MM_swapImage('target','','apple3.jpg',1)"><img src="apple3.jpg" width="84" height="66"/></a>
</p>
<!--End rollover links-->

</body>
</html>

coothead
10-22-2005, 05:04 PM
Hi there lllusion,

well, this is much simpler and can be achieved with onmouseover. :)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>mouseout href change</title>
<base href="http://coothead.homestead.com/files/"/>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
<meta name="Content-Script-Type" content="text/javascript"/>
<meta name="Content-Style-Type" content="text/css"/>

<style type="text/css">
<!--
body {
background-color:#999;
}
#link {
width:362px;
height:282px;
padding:4px;
background-color:#ddd;
border:3px double #000;
margin:10px auto;
}
#link img{
display:block;
width:360px;
height:280px;
border:1px solid #000;
}
#container {
width:1098px;
height:286px;
padding:2px;
background-color:#ddd;
border:3px double #000;
margin:auto;
}
#container img {
float:left;
border:1px solid #000;
margin:2px;
}
#info, h5 {
text-align:center;
}
#info input {
width:200px;
}
-->
</style>

<script type="text/javascript">
<!--
function swapHref(n) {
var urls=new Array();
urls[0]='http://www.codingforums.com';
urls[1]='http://www.google.com';
urls[2]='http://www.yahoo.com';

document.getElementById('linkA').href=urls[n];
document.forms[0][0].value=urls[n];

}
//-->
</script>

</head>
<body onload="document.forms[0][0].value='http://www.codingforums.com'">

<h5>this is the href to which a click - on the single image - will send you</h5>

<form action="#">
<div id="info">
<input type="text"/>
</div>
</form>

<div id="link">
<a id="linkA" href="http://www.codingforums.com">
<img src="apple3.jpg" alt=""/>
</a>
</div>

<div id="container">
<img src="apple0.jpg" alt="" onmouseover="swapHref(0)"/>
<img src="apple1.jpg" alt="" onmouseover="swapHref(1)"/>
<img src="apple2.jpg" alt="" onmouseover="swapHref(2)"/>
</div>

</body>
</html>

By the way like kor, I cannot fathom MM scripting. :eek:

coothead

lllusion
10-22-2005, 05:43 PM
THANK YOU!! :thumbsup: :D

Here's the combination that does just what I want.
Needless to say, you will get credit in the html when I use this.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>mouseout href change</title>

<base href="http://coothead.homestead.com/files/"/>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
<meta name="Content-Script-Type" content="text/javascript"/>
<meta name="Content-Style-Type" content="text/css"/>

<style type="text/css">
<!--
body {
background-color:#999;
}
#info, h5 {
text-align:center;
}
#info input {
width:200px;
}
-->
</style>

<script type="text/javascript">
<!--
function swapHref(n) {
var urls=new Array();
urls[0]='apple0.jpg';
urls[1]='apple1.jpg';
urls[2]='apple2.jpg';
urls[3]='apple3.jpg';

document.getElementById('linkA').href=urls[n];
document.forms[0][0].value=urls[n];

}
//-->
</script>

<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v3.0
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>

</head>
<body>

<div align="left">
<table border="0" cellpadding="0" cellspacing="0" width="600" height="50">
<tr>
<td>The large apple image reflects 2 things;
<ol type="i">
<li>it shows the image of the apple that IS BEING or HAS JUST BEEN moused over</li>
<li>it links to the image of THE LAST moused over apple<form action="#"><div id="info"><input type="text" value="apple0.jpg" size="20"/></div></form></li>
</ol>
</td>
</tr>
</table>
</div>

<!--Image that changes appearance AND its link value-->
<p align="left">
<a id="linkA" href="apple0.jpg" target="_blank">
<img src="apple0.jpg" alt="" border="0" width="360" height="280" name="target" id="target"/>
</a>
</p>
<!--End of Image that changes appearance AND its link value-->

<br>

<!--Start rollover links-->
<p align="left">
<a class="link" href="apple0.jpg" target="_blank"
onmouseout="swapHref(0)"
onmouseover="MM_swapImage('target','','apple0.jpg',1)"><img src="apple0.jpg" width="84" height="66"/></a>
<a class="link" href="http://coothead.homestead.com/files/apple1.jpg" target="_blank"
onmouseout="swapHref(1)"
onmouseover="MM_swapImage('target','','apple1.jpg',1)"><img src="apple1.jpg" width="84" height="66"/></a>
<a class="link" href="http://coothead.homestead.com/files/apple2.jpg" target="_blank"
onmouseout="swapHref(2)"
onmouseover="MM_swapImage('target','','apple2.jpg',1)"><img src="apple2.jpg" width="84" height="66"/></a>
<a class="link" href="http://coothead.homestead.com/files/apple3.jpg" target="_blank"
onmouseout="swapHref(3)"
onmouseover="MM_swapImage('target','','apple3.jpg',1)"><img src="apple3.jpg" width="84" height="66"/></a>
</p>
<!--End rollover links-->

</body>
</html>

coothead
10-22-2005, 06:04 PM
No problem, you're welcome. :)

canadianjameson
10-22-2005, 09:59 PM
cooter's an animal.

:D

coothead
10-22-2005, 10:11 PM
cooter's an animal.

:D

Well, that makes a change, I'm more used to cootie is a louse. :D

coothead



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum