PDA

Click to See Complete Forum and Search --> : Display image when text link is clicked

vulcanchic
10-10-2003, 10:48 PM
I'd like to have a text link that when clicked, displays an image, but not in a pop-up window, directly on the same page the link is on. Is there a way to do this, maybe using CSS?

Thanks!
Charles
10-11-2003, 06:59 AM
There's no need to use icky JavaScript for this.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Example</title>

<iframe src="" name="bettie"></iframe>

<p><a href="http://www.bettiepage.com/images/photos/bikini/bikini1.jpg" target="bettie">Bettie</a></p>
vulcanchic
10-11-2003, 02:32 PM
Thanks for your reply! I have a couple more questions. How do I position the frame to be where I want it on the page, and to not have scroll bars? Or better yet, is there a way to do this without a frame?

Thanks!
Charles
10-11-2003, 02:38 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Example</title>

<style type="text/css">
<!--
iframe {
overflow:hidden;
position:absolute;
top:50px;
left:50px;
height:400px;
width:175px;
border:0px solid #000;
}
-->
</style>

<iframe src="" name="bettie"></iframe>

<p><a href="http://www.bettiepage.com/images/photos/bikini/bikini1.jpg" target="bettie">Bettie</a></p>
elizajan
10-11-2003, 02:54 PM
Try this to show an image.

<div align="center"><h3>Click thumbnail to enlarge<br>Double click to shrink</h3></div>
<div align="center">
<img src="11.gif" width="60" height="45" name="myImage"
onclick="javascript:myImage.height=150;myImage.width=200"
ondblclick="javascript:myImage.width=60;myImage.height=45"></div>

My copy of 11.gif is 200 wide and 150 tall.
Charles
10-11-2003, 02:57 PM
Originally posted by elizajan
Try this to show an image.

<div align="center"><h3>Click thumbnail to enlarge<br>Double click to shrink</h3></div>
<div align="center">
<img src="11.gif" width="60" height="45" name="myImage"
onclick="javascript:myImage.height=150;myImage.width=200"
ondblclick="javascript:myImage.width=60;myImage.height=45"></div>

My copy of 11.gif is 200 wide and 150 tall. 1) Your javaScript is invalid.

2) That will give you a link that does nothing at all for the 13% of users that do not use JavaScript.
vulcanchic
10-11-2003, 09:39 PM
Hi Charles-
Thanks so much! This is perfect for what I needed. Can I bother you again? If I use an image for the input type instead of button, when it's clicked, it only shows the picture for a second, then you hear another click, and it reloads the page, without keeping the picture visible. What am I doing wrong with the image for my input type?
Charles
10-12-2003, 06:08 AM
Originally posted by vulcanchic
What am I doing wrong with the image for my input type? The image INPUT (http://www.w3.org/TR/html4/interact/forms.html#edef-INPUT) type is supposed to do that. It's a submit button.