need HTML for pop-up photo windows

Hi all,
I'm new here and hoping you can help me. I'm a cake decorator, and on my website, I'd like to have the enlarged view of the cakes pop up in a small separate window. I've searched online and found code generators to do this, but they all add *text* next to the photo to click on and get the pop up. I don't want the text, I want people to be able to click on the photo itself to see the the enlarged photo in the pop up. Can anyone help me?? I'm using FrontPage 2003.

Thanks,
Rebecca
http://www.SugarCreations.com

 

here's a good example of a javascript function for a new pop up window.

http://www.w3schools.com/js/tryit.asp?filename=tryjs_openallwindow

you can take the onclick even and put it into the link.

Give it a try first and if you have trouble with it, post back. We all learn by trying first

 

Thanks for the link. How do I change the code from 'click on this button to open the window' to 'click on my picture to open the window'???

 

make your standard image source tag and place the onClick event in it.

<img src="IMAGENAMEHERE" width="x" height="y" border=0 alt="z"
onclick="openwindow()">

IMAGENAME=the name of your picture
x=the parameters for picture width.
y=the parameter for picture height.
z=alternate text shown on mouse over.

note, that there will be no change in cursor symbol when you mouse over the image. It will appear as an arrow, not as a hand. So make sure you tell your visitors that they can click on the image.

 

Oh, yea!!!!!!! Thanks so much!! I got it to work and it's exactly what I needed to know!!

 

Happy to help

 

Hi again,
Sorry to be a pain, but I've gotten down to trying to put this code in my newly designed site and it's not working the way I want. I have a page with 12 different cake photo thumbnails and I want each enlarged view of the cakes to open in a pop-up window seperately. I get the first one to work, and all the other thumbnails open a pop-up, but the pop-ups all show a photo of the same cake.

I'm assuming this is because the code placed in the header specifies what jpg to open. I've been trying and trying to come up with a way to specify the jpg to open in the body command, but it's not working. Can anyone help???

 

Create a new JavaScript function for each different cake. ex:

Code:

<script type="text/javascript">
 function openwindow()
 {
 window.open("http://www.w3schools.com","my_new_window","toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=400, height=400")
 }
 function openwindow2()
 {
 window.open("http://www.majorgeeks.com","my_new_window","toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=400, height=400")
 }
 </script>

now, put openwindow2() for the second onclick, and then it opens the different page. You can define as many functions as you need, corrosponding to the number of cake pictures.

 

Where do I insert the code. I need help

I'm brand new to this website stuff. I use dreamweaver. Where do I insert the code in the html part in order for this script to work. I would appreciate any help I could get thanks. Robbb31

 

put the script above the </head> tag.

 

Instead of creating 50 million functions that do the same thing, why not use varables. eg

Code:

function openwindow(link, target)
{
window.open(link,target,"toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=400, height=400")
}

then for the images put

Code:

<img src="http://www.yoursite.com/cake1.jpg" border=0 onClick="openwindow('http://www.yoursite.com/cake1.jpg','cakeframe')">

"openwindow('http://www.yoursite.com/cake1.jpg','cakeframe')"

the image you want to appear in the pop up window, would go here.

the cakeframe, is just a frame, leave it or take it, its up to you.

Doing it this way basically means that you don't have to re-write the same function over and over and over. just the image code needs changing.

 

That could be the name of a window rather than a frame, and if you ran that function it would create a window containing the JPG called "cakeframe", so if you clicked on another link to open another image if you didnt close the after mentioned "cakeframe" window, it would open the new location in that.

Using one function instead of millions is much better practice, so I would use that.

 

This working :

<a href="javascript: void(0)" onclick="window.open('http://kapital3.org:8080/capture1.jpg','windowname1','width=450,height=350'); return false;" > <img src="http://kapital3.org:8080/capture1.jpg" width="280" height="143" </a>

 

Kindly don't reply to 10+ year old threads.