Forum Moderators: open
<script language="javascript" type="text/javascript">
function into_image () {
document.getElementById ( "img1" ).outerHTML = '<img id="img2" onmouseout="outof_image()" src="images/mypic_01.gif" >' ;
}
function outof_image () {
document.getElementById ( "img2" ).outerHTML = '<img id="img1" onmouseover="into_image()" src="images/mypic_01_small.gif" >' ;
}
</script>
</head>
<body>
<p>
<img id="img1" onmouseover="into_image()" src="images/mypic_01_small.gif" >
</p>
</body>
But to use this on a site with many images would be VERY labor intensive with way too much code. I have seen programs you can buy that will allow thumbnails to show as larger images with a mouseover or click. But is there something "homegrown" I can use that does not require as much as the script above?
Newbie question for sure!
I have two scripts that work. The first one will always place the image where designated by changing the x and y variables. The second will place it relative to where the image is. If you want an example of a site I use it one, sticky me.
First script;
<script type="text/javascript>
var scrOfX = 0, scrOfY = 0;
window.onscroll=function getScrollXY() {
if( typeof( window.pageYOffset ) == 'number' ) {
//Netscape compliant
scrOfY = window.pageYOffset;
scrOfX = window.pageXOffset;
} else if( document.body && ( document.body.scrollLeft ¦¦ document.body.scrollTop ) ) {
//DOM compliant
scrOfY = document.body.scrollTop;
scrOfX = document.body.scrollLeft;
} else if( document.documentElement && ( document.documentElement.scrollLeft ¦¦ document.documentElement.scrollTop ) ) {
//IE6 standards compliant mode
scrOfY = document.documentElement.scrollTop;
scrOfX = document.documentElement.scrollLeft;
}
return [ scrOfX, scrOfY ];
}
function AssignPosition(d) {
d.style.left = (scrOfX) + "px";
d.style.top = (scrOfY) + "px";
}
function HideContent(d) {
if(d.length < 1) { return; }
document.getElementById(d).style.display = "none";
}
function ShowContent(d) {
if(d.length < 1) { return; }
var dd = document.getElementById(d);
AssignPosition(dd);
dd.style.display = "block";
}
function ReverseContentDisplay(d) {
if(d.length < 1) { return; }
var dd = document.getElementById(d);
AssignPosition(dd);
if(dd.style.display == "none") { dd.style.display = "block"; }
else { dd.style.display = "none"; }
}
</script>
Second Script
<script type="text/javascript>
function HideContent(d) {
if(d.length < 1) { return; }
document.getElementById(d).style.display = "none";
}
function ShowContent(d) {
if(d.length < 1) { return; }
document.getElementById(d).style.display = "block";
}
function ReverseContentDisplay(d) {
if(d.length < 1) { return; }
if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; }
else { document.getElementById(d).style.display = "none"; }
}
</script>
Each script needs a CSS for the larger image as it is hidden to start. I usually do a class like
.show {
display: none; /* THIS IS REQUIRED */
width: if known, otheriwse not necessary;
height: if known, otherwise not necessary;
border: optional;
background-color: optional though recommended with text;
margin: optional;
padding: optional;
}
For each of your larger images, regardless which script you use:
<img class="show" src="image_path" id="imgone">
<img class="show" src="image_path" id="imgtwo"> and so on.
The mouseover is the same for each script:
<a target="_blank" href="/image_large.jpg"><img src="/image_small.jpg" title="OPTIONAL" alt="OPTIONAL" onmouseover="ShowContent('imgone'); return true;" onmouseout="HideContent('imageone'); return true;" /></a>
I add the link target blank in case the mouseover does not work or javascript is disabled. Just a personal choice. I like it better than putting <a href="#">
Hope this helps.
Marshall
