Web Hosting Talk






PDA

View Full Version : image change with iframe

kentcounty
11-29-2005, 12:35 PM
Can anyone figure out if it`s possible, how the put the `mainimage` line of this script within an iframe?

I like this script, which is useful for one of my pages. However, several of the images I`m using are over 800px wide, and would better suited in an iframe.

Here`s the script in question...
http://www.i-code.co.uk/javascript/imageviewer.php

Thanks.
WebDesignGold
11-29-2005, 01:35 PM
I've not tested the script, but can't you just make another image "blank.jpg" and make it as wide as your biggest image instead of the current one? I think that it should work.
kentcounty
11-29-2005, 03:59 PM
It`s because my site is a fixed width at 760px, so I didn`t want it stretching out of proportion.
WebDesignGold
11-29-2005, 04:19 PM
Ok, I understand. Here's how you can do it:

Create a new document and call it for instance "foo.htm" like this:
<html>
<head>
<title>Iframe</title>
<style>
a:visited{color:black;font-family:verdana}
a:link{color:black;font-family:verdana}
a:hover{color:blue;font-family:verdana}

td {color:black;font-family:verdana;font size:8pt}
p {color:black;font-family:verdana;font size:8pt;text-decoration: none}
h1 {color:black;font-family:verdana;font size:12pt;text-decoration: none}
</style>
<script>
function changeImage(filename)
{
document.mainimage.src = filename;
}
</script>
</head>
<body>
<p align="center"> <img name="mainimage" src="blank.jpg"></p>
</body>
</html>

The other document, imageviewer.htm from which you call the pictures will look like this:
<html>
<head>
<title>Image Viewer</title>
<style>
a:visited{color:black;font-family:verdana}
a:link{color:black;font-family:verdana}
a:hover{color:blue;font-family:verdana}

td {color:black;font-family:verdana;font size:8pt}
p {color:black;font-family:verdana;font size:8pt;text-decoration: none}
h1 {color:black;font-family:verdana;font size:12pt;text-decoration: none}
</style>
</head>
<body>
<h1 align="center" color="blue">In-line Image Viewer</h1>
<p align="center">
<a href="javascript:changeImage('image1.jpg')" target="boo">Image 1</a>
<a href="javascript:changeImage('image2.jpg')" target="boo">Image 2</a>
<a href="javascript:changeImage('image3.jpg')" target="boo">Image 3</a>
<a href="javascript:changeImage('image4.jpg')" target="boo">Image 4</a>
<a href="javascript:changeImage('image5.jpg')" target="boo">Image 5</a>
</p>

<p align=center><iframe src="foo.htm" width=600 height=400 name="boo"></iframe></p>

</body>
</html>

As you can see, it's about targeting.