like at this link when u hover over an image it shows that image and theres like 2 different images to choose from i want to make a gallery like that for my webstore but how do i? does anyone know?

Recommended Answers

All 4 Replies

<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

<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

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!

haha no. i do my own designs

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, learning, and sharing knowledge.