Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › How to show thumbnail image on mouse over
New Posts  All Forums:Forum Nav:

How to show thumbnail image on mouse over

post #1 of 12
Thread Starter 
whats the code to show the thumbnail image of a product, just by mousing over to its original image, i tried this, but no luck
i put this in the header
Code:
<script language="Javascript">
function openNewWindow( pageToLoad, winName, width, height, center,resizeable) {
xposition=0; yposition=0;
if ((parseInt(navigator.appVersion) >= 4 ) && (center)){
xposition = (screen.width - width) / 2;
yposition = (screen.height - height) / 2;
}
args = "width=" + width + ","
+ "height=" + height + ","
+ "location=0,"
+ "menubar=0,"
+ "resizable="+resizeable
+ ",scrollbars=1,"
+ "status=0,"
+ "titlebar=0,"
+ "toolbar=0,"
+ "hotkeys=0,"
+ "screenx=" + xposition + "," //NN Only
+ "screeny=" + yposition + "," //NN Only
+ "left=" + xposition + "," //IE Only
+ "top=" + yposition; //IE Only
window.open( pageToLoad,winName,args );
}
</script>
and i put this one in the product details page
Code:
<a href="javascript:openNewWindow('$product.thumbnailImage','',500,300,1,0)"> 
 
      <ss:link source="$product.photoImage"></a>
post #2 of 12
I don't get what you're trying to say. A thumbnail is a small image that links to a full size image. So showing the thumbnail by hovering over the original picture makes no sense. ?
über pwnage v2
(15 items)
 
  
CPUMotherboardGraphicsRAM
i7 2600K 4.4GHz @ 1.36v Asus P8Z68-V LX EVGA GTX 970 SuperClocked ACX2.0 4GB G.SKILL Ripjaws X 2x8GB DDR3 @ 1648MHz 
Hard DriveOptical DriveCoolingOS
840EVO 250GB / 3TB+2TB+320GB Bar / 750GB Cav Blk Samsung DVDRW Hyper 212+ Windows 10 Pro x64 
MonitorKeyboardPowerCase
U2412M + X191W Azio MGK1 Corsair RM650X Centurion 5 with acoustic foam 
MouseMouse PadAudio
MX518 SteelSeries Xonar DG + Koss PortaPro + Logitech X-540 + Bey... 
  hide details  
Reply
über pwnage v2
(15 items)
 
  
CPUMotherboardGraphicsRAM
i7 2600K 4.4GHz @ 1.36v Asus P8Z68-V LX EVGA GTX 970 SuperClocked ACX2.0 4GB G.SKILL Ripjaws X 2x8GB DDR3 @ 1648MHz 
Hard DriveOptical DriveCoolingOS
840EVO 250GB / 3TB+2TB+320GB Bar / 750GB Cav Blk Samsung DVDRW Hyper 212+ Windows 10 Pro x64 
MonitorKeyboardPowerCase
U2412M + X191W Azio MGK1 Corsair RM650X Centurion 5 with acoustic foam 
MouseMouse PadAudio
MX518 SteelSeries Xonar DG + Koss PortaPro + Logitech X-540 + Bey... 
  hide details  
Reply
post #3 of 12
Thread Starter 
Quote:
Originally Posted by Boris4ka View Post
I don't get what you're trying to say. A thumbnail is a small image that links to a full size image. So showing the thumbnail by hovering over the original picture makes no sense. ?
yea, i want the full size image(thumbnail) to automatically show just by mousing over to the small image

go to ncix.com and look at one of the product detail pages there, you'll know what im talking about
post #4 of 12
Quote:
Originally Posted by blade007 View Post
yea, i want the full size image(thumbnail) to show just by mousing over to the small image
You'd want something like this in your CSS code:

.image a{
background: url("small-image.gif");
}

.image a:hover{
background: url("big-image.gif");
}

And in your HTML part something like this:

<a href="" class="image"><img src="spacer.gif" border="0" width="" height=""></a>

spacer.gif would be a 1x1 sized 100% transparent image, commonly used in web design for formatting purposes.

And of course you'd have to change the size and other attributes, but that is the basic code.

EDIT: I just saw your link to ncix.com. If you want something like that you can still use this basic code that I posted, but you'd have to float (in CSS) it to the right position on a:hover.

How well do you know HTML and CSS? Should I be explaining it in simpler terms to you or is this ok?
über pwnage v2
(15 items)
 
  
CPUMotherboardGraphicsRAM
i7 2600K 4.4GHz @ 1.36v Asus P8Z68-V LX EVGA GTX 970 SuperClocked ACX2.0 4GB G.SKILL Ripjaws X 2x8GB DDR3 @ 1648MHz 
Hard DriveOptical DriveCoolingOS
840EVO 250GB / 3TB+2TB+320GB Bar / 750GB Cav Blk Samsung DVDRW Hyper 212+ Windows 10 Pro x64 
MonitorKeyboardPowerCase
U2412M + X191W Azio MGK1 Corsair RM650X Centurion 5 with acoustic foam 
MouseMouse PadAudio
MX518 SteelSeries Xonar DG + Koss PortaPro + Logitech X-540 + Bey... 
  hide details  
Reply
über pwnage v2
(15 items)
 
  
CPUMotherboardGraphicsRAM
i7 2600K 4.4GHz @ 1.36v Asus P8Z68-V LX EVGA GTX 970 SuperClocked ACX2.0 4GB G.SKILL Ripjaws X 2x8GB DDR3 @ 1648MHz 
Hard DriveOptical DriveCoolingOS
840EVO 250GB / 3TB+2TB+320GB Bar / 750GB Cav Blk Samsung DVDRW Hyper 212+ Windows 10 Pro x64 
MonitorKeyboardPowerCase
U2412M + X191W Azio MGK1 Corsair RM650X Centurion 5 with acoustic foam 
MouseMouse PadAudio
MX518 SteelSeries Xonar DG + Koss PortaPro + Logitech X-540 + Bey... 
  hide details  
Reply
post #5 of 12
Thread Starter 
Quote:
Originally Posted by Boris4ka View Post

How well do you know HTML and CSS? Should I be explaining it in simpler terms to you or is this ok?
hey, thanks so much, im pretty good with html and css, the way u explained it was just fine
post #6 of 12
Thread Starter 
i cant get it to work, this is what i put in my header..

Code:
.image a{
background: url("$product.photoImage");
}
.image a:hover{
background: url("$product.thumbnailImage");
}
and this is what i put in my product details template..

Code:
<ss:link class="image" source="$product.photoImage"> <ss:image class="image" source="$product.thumbnailImage" alt="$product.name" border="0"/>
(the "ss:" attribute is an internal coding from my ecommerce provider)
post #7 of 12
First of all, did you put the first code just in your header, or in your CSS stylesheet. If you don't have one, you have to put the code in these tags:

<style type="text/css">
*CSS code here*
</style>

And for this part:

<ss:link class="image" source="$product.photoImage"> <ss:image class="image" source="$product.thumbnailImage" alt="$product.name" border="0"/>

that's wrong. It has to be a link that has both images in the background, one on normal and one on mouseover. What you did was just put two images together side by side. Use this:

<a href="" class="image"><img src="spacer.gif" border="0" width="" height=""></a>

and just insert the ss: stuff, and then put $product.thumbnailImage and the other one into the CSS.
über pwnage v2
(15 items)
 
  
CPUMotherboardGraphicsRAM
i7 2600K 4.4GHz @ 1.36v Asus P8Z68-V LX EVGA GTX 970 SuperClocked ACX2.0 4GB G.SKILL Ripjaws X 2x8GB DDR3 @ 1648MHz 
Hard DriveOptical DriveCoolingOS
840EVO 250GB / 3TB+2TB+320GB Bar / 750GB Cav Blk Samsung DVDRW Hyper 212+ Windows 10 Pro x64 
MonitorKeyboardPowerCase
U2412M + X191W Azio MGK1 Corsair RM650X Centurion 5 with acoustic foam 
MouseMouse PadAudio
MX518 SteelSeries Xonar DG + Koss PortaPro + Logitech X-540 + Bey... 
  hide details  
Reply
über pwnage v2
(15 items)
 
  
CPUMotherboardGraphicsRAM
i7 2600K 4.4GHz @ 1.36v Asus P8Z68-V LX EVGA GTX 970 SuperClocked ACX2.0 4GB G.SKILL Ripjaws X 2x8GB DDR3 @ 1648MHz 
Hard DriveOptical DriveCoolingOS
840EVO 250GB / 3TB+2TB+320GB Bar / 750GB Cav Blk Samsung DVDRW Hyper 212+ Windows 10 Pro x64 
MonitorKeyboardPowerCase
U2412M + X191W Azio MGK1 Corsair RM650X Centurion 5 with acoustic foam 
MouseMouse PadAudio
MX518 SteelSeries Xonar DG + Koss PortaPro + Logitech X-540 + Bey... 
  hide details  
Reply
post #8 of 12
Thread Starter 
Quote:
Originally Posted by Boris4ka View Post
First of all, did you put the first code just in your header, or in your CSS stylesheet. If you don't have one, you have to put the code in these tags:

<style type="text/css">
*CSS code here*
</style>

yea, i put it in my css sheet, is this the right code..
Code:
.image a{
background: url("$product.photoImage");
}
.image a:hover{
background: url("$product.thumbnailImage");
}
post #9 of 12
Thread Starter 
Quote:
Originally Posted by Boris4ka View Post

And for this part:

<ss:link class="image" source="$product.photoImage"> <ss:image class="image" source="$product.thumbnailImage" alt="$product.name" border="0"/>

that's wrong. It has to be a link that has both images in the background, one on normal and one on mouseover. What you did was just put two images together side by side. Use this:

<a href="" class="image"><img src="spacer.gif" border="0" width="" height=""></a>

and just insert the ss: stuff, and then put $product.thumbnailImage and the other one into the CSS.
i dont understand what u mean by this, i dont plan on doin this for each product as i hav over 1000+ products, im wanting to find the code to put on my product details template, so i wouldnt have to do this 1000+ times
post #10 of 12
Hmm I'm not sure how to do this for multiple products. Sorry maybe someone else can help you. I'm sure it can be done with PHP though, but I don't know how your e-commerce script works.
über pwnage v2
(15 items)
 
  
CPUMotherboardGraphicsRAM
i7 2600K 4.4GHz @ 1.36v Asus P8Z68-V LX EVGA GTX 970 SuperClocked ACX2.0 4GB G.SKILL Ripjaws X 2x8GB DDR3 @ 1648MHz 
Hard DriveOptical DriveCoolingOS
840EVO 250GB / 3TB+2TB+320GB Bar / 750GB Cav Blk Samsung DVDRW Hyper 212+ Windows 10 Pro x64 
MonitorKeyboardPowerCase
U2412M + X191W Azio MGK1 Corsair RM650X Centurion 5 with acoustic foam 
MouseMouse PadAudio
MX518 SteelSeries Xonar DG + Koss PortaPro + Logitech X-540 + Bey... 
  hide details  
Reply
über pwnage v2
(15 items)
 
  
CPUMotherboardGraphicsRAM
i7 2600K 4.4GHz @ 1.36v Asus P8Z68-V LX EVGA GTX 970 SuperClocked ACX2.0 4GB G.SKILL Ripjaws X 2x8GB DDR3 @ 1648MHz 
Hard DriveOptical DriveCoolingOS
840EVO 250GB / 3TB+2TB+320GB Bar / 750GB Cav Blk Samsung DVDRW Hyper 212+ Windows 10 Pro x64 
MonitorKeyboardPowerCase
U2412M + X191W Azio MGK1 Corsair RM650X Centurion 5 with acoustic foam 
MouseMouse PadAudio
MX518 SteelSeries Xonar DG + Koss PortaPro + Logitech X-540 + Bey... 
  hide details  
Reply
New Posts  All Forums:Forum Nav:
  Return Home
  Back to Forum: Web Coding
Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › How to show thumbnail image on mouse over