Member Avatar for SKANK!!!!!

like at target.com this linkhttp://www.target.com/Avington-Headboard/dp/B0011YRZ2U/ref=sr_1_1?ie=UTF8&frombrowse=0&searchView=grid5&searchNodeID=12996951&node=12996951&searchRank=pmrank&searchPage=1&searchSize=30&id=Avington%20Headboard 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?

  • 3 Contributors
  • 4 Replies
  • 158 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by SKANK!!!!!
Member Avatar for almostbob 
<style type='text/css'>
.l { width:30%; float:left; }
.r {width:69%; float:right;}
.w { width:100%; }
</style>
</head><body>
<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>
<div class='r'><img id='big.pic' src='blank.gif'><!-- blank image till a mouseover occurs-->
</div>
</div>
</body>
<script type="text/javascript">
//<![CDATA[
<!-- 
image1 = new Image();
image1.src = "large1.jpg";
image2 = new Image();
image2.src = "large2.jpg";
image3 = new Image();
image3.src = "large3.jpg";
//-->
//]]>
</script>
</html>

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 because: n/a
Member Avatar for kiraniru 
<html>
<head>
<title></title>
</head>
<script language="javascript">
function OnMouseOverMainImage(image, mainImage)
{
    mainImage.src = image.src;
    jsLastMainImage = image.src;
}
</script>
<body>
<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>
    <div style="width:100px; float:left">
      <div > <img src="Images/102wheels-50.gif" width="100" height="100" onmouseover="OnMouseOverMainImage(this,ctrl);"> </div>
    </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>
    <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>
    <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>
    <div class="clear"> </div>
  </div>
</div>
</body>
</html>

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

Edited by Ezzaral because: Added [code] [/code] tags. Please use them to format any code that you post.
Member Avatar for SKANK!!!!!

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!

Member Avatar for SKANK!!!!!

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, networking, learning, and sharing knowledge.