Forums

Overview » Dreamweaver » pop up images within the web page?
This topic is locked

pop up images within the web page?

Shira Mandel
Newbie



Since: 06 Mar 2007
Posts: 13
Posted 09 Mar 2007 03:17:04

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!

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!
Shira Mandel
Newbie



Since: 06 Mar 2007
Posts: 13
Replied 09 Mar 2007 11:14:20
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!
Javier Castro
Devoted Member



Since: 09 Sep 2004
Posts: 454
Replied 09 Mar 2007 14:36:31
change the onMouseover to onClick that should solve that.
Shira Mandel
Newbie



Since: 06 Mar 2007
Posts: 13
Replied 09 Mar 2007 21:18:05
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
Javier Castro
Devoted Member



Since: 09 Sep 2004
Posts: 454
Replied 10 Mar 2007 00:15:54
that's what the onClick would do. bring your new image only when the user click's on the next image.
Shira Mandel
Newbie



Since: 06 Mar 2007
Posts: 13
Replied 10 Mar 2007 00:27:50
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
Javier Castro
Devoted Member



Since: 09 Sep 2004
Posts: 454
Replied 10 Mar 2007 07:14:30
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>
Shira Mandel
Newbie



Since: 06 Mar 2007
Posts: 13
Replied 11 Mar 2007 03:23:33
you rock!
Shira Mandel
Newbie



Since: 06 Mar 2007
Posts: 13
Replied 26 Mar 2007 09:01:26
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.