7 Years
Discussion Span
Last Post by SKANK!!!!!
<style type='text/css'>
.l { width:30%; float:left; }
.r {width:69%; float:right;}
.w { width:100%; }
<div class='w'>
<div class='l'>
<img src='small1.jpg' onmouseover="document.getElementById('big.pic').src='large1.jpg" alt='pic' title='title' width='width' height='height' ><!-- properly setup the images this is just a code sample -->
<img src='small2.jpg' onmouseover="document.getElementById('big.pic').src='large2.jpg" alt='pic'>
<img src='small3.jpg' onmouseover="document.getElementById('big.pic').src='large3.jpg" alt='pic'>
<div class='r'><img id='big.pic' src='blank.gif'><!-- blank image till a mouseover occurs-->
<script type="text/javascript">
image1 = new Image();
image1.src = "large1.jpg";
image2 = new Image();
image2.src = "large2.jpg";
image3 = new Image();
image3.src = "large3.jpg";

image load script places mouseover images in the tif, but does it after the page is loaded, for appearance of faster pages

Edited by almostbob: n/a

<script language="javascript">
function OnMouseOverMainImage(image, mainImage)
    mainImage.src = image.src;
    jsLastMainImage = image.src;
<div class="mc_image-page" style="width:400px;">
  <div style="width:300px; height:300px; margin:10px auto;"> <img id="ctrl" onmouseover="OnMainImageCtrlMouseOver(this,1)" onmouseout="OnMainImageCtrlOnMouseOut(this)" onmousemove="OnMainImageCtrlOnMouseMove(this,event)" src="Images/101fgtips-100.gif" style="border-width: 0px;"> </div>
  <div class="mc_image-gallery">
    <div style="width:100px; float:left;">
      <div ><img src="Images/101fgtips-100.gif" width="100" height="100" style="border-width: 0px;" onMouseOver="OnMouseOverMainImage(this,ctrl);"></div>
    <div style="width:100px; float:left">
      <div > <img src="Images/102wheels-50.gif" width="100" height="100" onmouseover="OnMouseOverMainImage(this,ctrl);"> </div>
    <div style="width:100px; float:left;">
      <div> <img src="Images/9715A001_75.jpg" width="100" height="100" style="border-width: 0px;" onmouseover="OnMouseOverMainImage(this,ctrl);"> </div>
    <div style="width:100px; float:left;">
      <div > <img src="Images/9715A001_125.jpg" width="100" height="100" style="border-width: 0px;" onmouseover="OnMouseOverMainImage(this,ctrl);"> </div>
    <div style="width:100px; float:left;">
      <div > <img src="Images/AntecCase.jpg" width="100" height="100" style="border-width: 0px;" onmouseover="OnMouseOverMainImage(this,ctrl);"> </div>
    <div class="clear"> </div>

create Images by :
1. 101fgtips-100.gif
2. 102wheels-50.gif
5. AntecCase.jpg

Edited by Ezzaral: Added [code] [/code] tags. Please use them to format any code that you post.


alright the first one for some reason i dont know did not work for me. the secodn one works ine i just need tostyle it thanks people!

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.