 |
|
|
| View previous topic :: View next topic |
| Author |
Message |
shertilda
Joined: 07 Jun 2009
Posts: 2
|
 Posted: Sun Jun 07, 2009 2:32 am Help! Rollover images problem |
 |
|
|
I have some problems with the rollover, I doubt is because of style="display:none".
Following is the code:
-----------------------------------------------------
<html>
<head>
<title>Untitled Document</title>
<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) { //v4.01
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);
if(!x && d.getElementById) x=d.getElementById(n); 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 onload="MM_preloadImages('photo_R.jpg')">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td id="main"><a href="#" onclick="document.getElementById('main').innerHTML=document.getElementById('try').innerHTML"><img src="banner.jpg"/></a></td>
</tr>
<tr>
<td id="try" style="display:none">
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('try','','photo_R.jpg',1)"><img src="photo.jpg" name="try" width="139" height="140" border="0" id="try" /></a></td>
</tr>
</table>
</body>
</html>
-----------------------------------------------------
The photo.jpg did not change to photo_R.jpg. Is there a solution? |
|
PayneLess Designs
Joined: 28 Feb 2007
Posts: 3593
Location: Biloxi, MS
|
| Posted: Sun Jun 07, 2009 5:10 am |
|
|
|
| Got link to "working" page online so other things can be checked? Hard to troubleshoot it without images you use. |
|
sticks464
Joined: 31 Dec 2006
Posts: 2308
|
| Posted: Sun Jun 07, 2009 5:25 am |
|
|
|
| Let me get this straight. You want to show another image when one image is clicked. Then when that image is displayed, you want to show another image when that one is hovered over. Is this correct? |
|
shertilda
Joined: 07 Jun 2009
Posts: 2
|
| Posted: Sun Jun 07, 2009 4:32 pm |
|
|
|
I have used some images from Flickr. Following is the code:
-----------------------------------------------------
<html>
<head>
<title>Untitled Document</title>
<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) { //v4.01
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);
if(!x && d.getElementById) x=d.getElementById(n); 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 onLoad="MM_preloadImages('photo_R.jpg')">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td id="main"><a href="#" onClick="document.getElementById('main').innerHTML=document.getElementById('try').innerHTML"><img src="http://farm3.static.flickr.com/2011/2391625012_2b6446b933_m.jpg"/></a></td>
</tr>
<tr>
<td id="try" style="display:none">
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('try','','http://farm1.static.flickr.com/170/402169833_bfae7b29e7.jpg?v=0',1)"><img src="http://farm1.static.flickr.com/165/402169757_d511f16004.jpg?v=1232336072" name="try" border="0" id="try" /></a></td>
</tr>
</table>
</body>
</html>
-------------------------------------------------------
What I wanted to achieve:
When user clicks on the first image, it will displayed the second image(the first image will disappear). Then when user rollovers to the second image, it will display a closeup.
The problem I faced:
When I click on the first image, the second image does appear, but when I rollover to the second image, the closeup doesn't display.
Anyone knows what could be the problem? Thanks. |
|
PayneLess Designs
Joined: 28 Feb 2007
Posts: 3593
Location: Biloxi, MS
|
| Posted: Tue Jul 21, 2009 8:19 pm |
|
|
|
| The closeup will not appear when the onClicked image appears as it is only an image. There is no mouseover code associated with that image since the focus has changed. You could do a small html popup window with the onClick image which can contain the mouseover code to show the original image. |
|
|
|
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
|
|
|
|
|
Forum Home
FAQ
Search
Memberlist
Register
Profile
Log in to check your private messages
Log in
