 | |
How can I replace a large image with other large images triggered from small image icons, mouse-overs or whatever???
alt.html.dhtml alt.html.dhtml
 |
| | Thread Tools | Display Modes |
#1
 
| |||
| |||
|
How can I replace a large image with other large images triggered from small image icons, mouse-overs or whatever??? -
07-26-2004
, 03:34 AM
#2
| |||
| |||
|
|
I'm creating an ad for eBay and want to keep the page condensed. I have 6 images - different views of an antique lap steel guitar - that need to show superb detail. I have cropped the images to take up a full webpage width. However, I don't want to put all six images on the page. I thought I could use icons as the trigger for displaying the images one by one. I cropped the six images down to small (but identifiable) icons. Is there a way I put the first full sized image on the page and go through all the other images by mouseover or clicking on the icons? I just want to be able to replace the full size image with the others. Another option would be to display ONLY the icons and, by mouseover or single click, open the large images in a new window. Is that possible? I've tried to find info on this thru a Google search. But I don't know what appropriate keywords to use. So I've run across a few days of dead ends. Hope you can give me some pointers. <TIA PS: any directions to specific tutorials on this 'trick' would be most appreciated, also. Thanks for any constructive info ... DOK |
same thing as an exercise. You need to cache the images in memory then use
mouseover and mouseout.
I have tried to edit the code so that you only get the relavent parts.
My original image was called mainImage and was in the center of the table
(this is where the 'css gang' will say I should not use tables for
positioning, very true).
As far as I can see this has it's problems, I think it has something to do
with available memory to the browser for the pre-caching of the images,
but if they are small then you should not have too many problems. Hope it
heplps.
<head>
<SCRIPT LANGUAGE="JavaScript1.1">
// Pre-cache images
var imgArray = new Array()
imgArray[0] = new Image(500, 333)
imgArray[1] = new Image(500, 750)
imgArray[2] = new Image(500, 750)
imgArray[3] = new Image(500, 333)
imgArray[4] = new Image(500, 333)
imgArray[5] = new Image(500, 333)
imgArray[6] = new Image(500, 375)
imgArray[0].src = "images/1.jpg"
imgArray[1].src = "images/2.jpg"
imgArray[2].src = "images/3.jpg"
imgArray[3].src = "images/4.jpg"
imgArray[4].src = "images/5.jpg"
imgArray[5].src = "images/6.jpg"
imgArray[6].src = "images/7.jpg"
// change main image on screen with mouse movement.
function mouseOn(i) {
document.mainimage.src = imgArray[i].src
}
function mouseOff() {
document.mainimage.src = imgArray[0].src
}
</script>
</head>
<BODY>
<H1 ALIGN="center">Welcome to DaveG's place.</H1> <BR>
<TABLE BORDER="0" ALIGN="center"><TR HEIGHT="300"><TD WIDTH="200">
<TABLE BORDER="0" WIDTH="75" ALIGN="center"> <TR>
<TD HEIGHT="75" ALIGN="center"><H1><A onMouseOver="mouseOn(1)"
onMouseOut="mouseOff()">1</A></H1></TD>
</TR>
<TR>
<TD HEIGHT="75" ALIGN="center"><H1><A onMouseOver="mouseOn(2)"
onMouseOut="mouseOff()">2</A></H1></TD>
</TR>
<TR>
<TD HEIGHT="75" ALIGN="center"><H1><A
onMouseOver="mouseOn(3)"onMouseOut="mouseOff()">3< /A></H1></TD>
</TR>
</TABLE>
</TD>
<TD WIDTH="500" HEIGHT="300" ALIGN="center"><IMG SRC="images/1.jpg"
NAME="mainimage" ALT="Main Picture" HEIGHT="300"></TD> <TD WIDTH="200">
<TABLE ALIGN="center" BORDER="0" WIDTH="75"> <TR>
<TD HEIGHT="75" ALIGN="center"><H1><A
onMouseOver="mouseOn(4)"onMouseOut="mouseOff()">4< /A></H1></TD>
</TR>
<TR>
<TD HEIGHT="75" ALIGN="center"><H1><A
onMouseOver="mouseOn(5)"onMouseOut="mouseOff()">5< /A></H1></TD>
</TR>
<TR>
<TD HEIGHT="75" ALIGN="center"><H1><A
onMouseOver="mouseOn(6)"onMouseOut="mouseOff()">6< /A></H1></TD>
</TR>
</TABLE>
</body>
|
« Previous Thread
|
Next Thread »
| Thread Tools | |
| Display Modes | |
Linear Mode
| |
Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2009, Jelsoft Enterprises Ltd.
Copyright ©2000 - 2009, Jelsoft Enterprises Ltd.