Forums
This topic is locked
pop up images within the web page?
Posted 09 Mar 2007 03:17:04
1
has voted
09 Mar 2007 03:17:04 Shira Mandel posted:
Does anyone know how to have an image pop up on the screen, not a separate pop up window (in a designated part of the website) when an image icon is clicked?I have been having problems trying to find a proper tutorial.
Right now they are just rollovers. I would want the image to stay up when an icon is clicked on until another one is clicked one.
I also noticed that if I am assigning these icons a behavior linking the pop up image to a "layer" the layers will not center in the web browser but the rest of the page (done in tables) does?
smandeldesign.com/test.html
Any suggestions, I am really new at this whole programming thing...thanks!
Replies
Replied 09 Mar 2007 11:14:20
09 Mar 2007 11:14:20 Shira Mandel replied:
HERE IS THE CORRECT LINK:
file:///Users/shiramandel/Desktop/local%20sites/shira%20mandel%20design%20website/print.html
I figured how to center everything.
Can anyone suggest how to click on an icon and have the image stay on top and go way when another icon is clicked?
Deeply appreciated!
file:///Users/shiramandel/Desktop/local%20sites/shira%20mandel%20design%20website/print.html
I figured how to center everything.
Can anyone suggest how to click on an icon and have the image stay on top and go way when another icon is clicked?
Deeply appreciated!
Replied 09 Mar 2007 14:36:31
09 Mar 2007 14:36:31 Javier Castro replied:
change the onMouseover to onClick that should solve that.
Replied 09 Mar 2007 21:18:05
09 Mar 2007 21:18:05 Shira Mandel replied:
what if I want the pop up image to stay up even if the mouse is taken off the icon...but switch out when another is clicked?
thanks for your patience
thanks for your patience
Replied 10 Mar 2007 00:15:54
10 Mar 2007 00:15:54 Javier Castro replied:
that's what the onClick would do. bring your new image only when the user click's on the next image.
Replied 10 Mar 2007 00:27:50
10 Mar 2007 00:27:50 Shira Mandel replied:
please check out the site and click on the first and second icon to the left...you click on one and it stays on screen behind the next pop up.
smandeldesign.com/print.html
smandeldesign.com/print.html
Replied 10 Mar 2007 07:14:30
10 Mar 2007 07:14:30 Javier Castro replied:
OK. my friend. here is some code that will be as helpful as it can be:
1.- copy code and paste in one empty page.
2.- replace image/one_blue.gif with one white image of about the size of your other images to keep size somewhat consistent. check my comment on the code.
3.- upload to server and test.
The way I did it was by using the image swap funtion on the behaviours tab. Check the DW help for more explanation. One more thing you can use a table-less layout or use it as I did with a table. It doesn't really matter.
best of luck.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="www.w3.org/1999/xhtml">
<script language="JavaScript" type="text/JavaScript">
<!--
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_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_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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body onload="MM_preloadImages('smandeldesign.com/images/print page images/10.8.jpg','smandeldesign.com/images/print page images/SL.jpg')">
<table width="80%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><!--this is the header table -->
<!-- -->
<tr><td width="433" id="bodytext"><table width="50%" border="0" align="center" cellpadding="5" cellspacing="0">
<tr>
<!-- on the line below - replace images/one_blue.gif with one image that is white so it blends with the background -->
<td height="400" colspan="3" valign="bottom"><div align="center"><img src="images/one_dblue.gif" alt="" id="Image1" /></div></td>
</tr>
<tr>
<td><div align="center"><a href="#" onclick="MM_swapImage('Image1','','smandeldesign.com/images/print page images/10.8.jpg',1)" >one</a></div></td>
<td><div align="center"><a href="#" onclick="MM_swapImage('Image1','','smandeldesign.com/images/print page images/SL.jpg',1)">Two</a></div></td>
<td><div align="center"><a href="#" onclick="MM_swapImage('Image1','','smandeldesign.com/images/print%20page%20images/BD.jpg',1)">Three</a></div> <div align="center"></div> <div align="center"><a href="#"></a></div></td>
</tr>
</table>
</html>
1.- copy code and paste in one empty page.
2.- replace image/one_blue.gif with one white image of about the size of your other images to keep size somewhat consistent. check my comment on the code.
3.- upload to server and test.
The way I did it was by using the image swap funtion on the behaviours tab. Check the DW help for more explanation. One more thing you can use a table-less layout or use it as I did with a table. It doesn't really matter.
best of luck.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="www.w3.org/1999/xhtml">
<script language="JavaScript" type="text/JavaScript">
<!--
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_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_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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body onload="MM_preloadImages('smandeldesign.com/images/print page images/10.8.jpg','smandeldesign.com/images/print page images/SL.jpg')">
<table width="80%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><!--this is the header table -->
<!-- -->
<tr><td width="433" id="bodytext"><table width="50%" border="0" align="center" cellpadding="5" cellspacing="0">
<tr>
<!-- on the line below - replace images/one_blue.gif with one image that is white so it blends with the background -->
<td height="400" colspan="3" valign="bottom"><div align="center"><img src="images/one_dblue.gif" alt="" id="Image1" /></div></td>
</tr>
<tr>
<td><div align="center"><a href="#" onclick="MM_swapImage('Image1','','smandeldesign.com/images/print page images/10.8.jpg',1)" >one</a></div></td>
<td><div align="center"><a href="#" onclick="MM_swapImage('Image1','','smandeldesign.com/images/print page images/SL.jpg',1)">Two</a></div></td>
<td><div align="center"><a href="#" onclick="MM_swapImage('Image1','','smandeldesign.com/images/print%20page%20images/BD.jpg',1)">Three</a></div> <div align="center"></div> <div align="center"><a href="#"></a></div></td>
</tr>
</table>
</html>
Replied 11 Mar 2007 03:23:33
11 Mar 2007 03:23:33 Shira Mandel replied:
you rock!
Replied 26 Mar 2007 09:01:26
26 Mar 2007 09:01:26 Shira Mandel replied:
one more thing, if you will...
How do you get that white replasive image in the images window (when you select the swap image behavior) Ive tried puting the image in the image folder on my root folder, but it doesnt show up....only "unnamed <image>"
Its hit or miss with me....
thanks.
How do you get that white replasive image in the images window (when you select the swap image behavior) Ive tried puting the image in the image folder on my root folder, but it doesnt show up....only "unnamed <image>"
Its hit or miss with me....
thanks.