Welcome, Guest ( Customer Panel | Login )




 All Forums
 VPCart Forum
 Suggestions for future release
 Enlarged Product Picture on Mouse Over
 New Topic  Reply to Topic
 Printer Friendly
Author Previous Topic Topic Next Topic  

patrickong
VP-CART New User

Singapore
58 Posts

Posted - January 24 2004 :  12:08:15  Show Profile  Visit patrickong's Homepage  Reply with Quote
This is just a suggestion as it's obviously more conveniently to see a larget picture of the product by pointing over it than to click.

See below for an example:

http://www.ecourts.com.sg/ecourts/product_details.asp?special=&dept%5Fid=8095&pf%5Fid=410496&mscssid=MLFBHH1BDF6T9K2VXN0PV8QB1CKTDLA0

bluesky
VP-CART Super User

304 Posts

Posted - January 27 2004 :  21:24:24  Show Profile  Reply with Quote
Hey that a really cool feature ..... first time I have seen that on an ecommercw website before .........very effective.............roll on VPASP

Go to Top of Page

siraj
VP-CART New User

USA
194 Posts

Posted - January 28 2004 :  00:12:14  Show Profile  Visit siraj's Homepage  Reply with Quote
I am afraid that the loading the page will take more time when you have more products to display. Mouse over need to bring the all the images upfront to show up when mouse moves over actually.
If you are doing for couple of products its alright but if you ar doing for all products, forget it. Customer will leave the site before its loads up especially when they use dial up!!!!

[email protected]
Go to Top of Page

patrickong
VP-CART New User

Singapore
58 Posts

Posted - January 28 2004 :  12:09:17  Show Profile  Visit patrickong's Homepage  Reply with Quote
Loading a small image is ok...

If you try shopping that sample site, you won't find it slow at all. Try to see all their products.. it's not slow. It's fast!

Go to Top of Page

GTM
VP-CART New User

USA
122 Posts

Posted - January 28 2004 :  17:54:08  Show Profile  Reply with Quote
It looks like it is using this script to call the image.

<script language="JavaScript">
function ModelWindow(jsTarget, jsWidth, jsHeight)
{
if (jsWidth == null)
{
jsWidth = 310;
}
if (jsHeight == null)
{
jsHeight = 345;
}
window.open(jsTarget,"model","width=" + jsWidth + ",height=" + jsHeight + ",titlebar=no,toolbar=no,menubar=no,location=no,scrollbars=no,resizable=no");
}

function CartWindow(jsTarget, jsWidth, jsHeight)
{
if (jsWidth == null)
{
jsWidth = 600;
}
if (jsHeight == null)
{
jsHeight = 500;
}
window.open(jsTarget,"cart","width=" + jsWidth + ",height=" + jsHeight + ",titlebar=no,toolbar=no,menubar=no,location=no,scrollbars=yes,resizable=yes");
}

function showBlowup(divID, imageID)
{
if(document.layers)
{
var divObject = document.layers[divID]
var imageObject = document.images[imageID]
divObject.pageX = imageObject.x
divObject.pageY = imageObject.y
divObject.visibility = "visible"
}
else if(document.all)
{
var divStyle = document.all.item(divID).style
var imageObject = document.images[imageID]
divStyle.posLeft = (window.event.clientX - window.event.offsetX)
divStyle.posTop = (window.event.clientY - window.event.offsetY + document.body.scrollTop)
if (navigator.appVersion.indexOf("Mac") >= 0)
{
divStyle.posTop -= document.body.scrollTop
}
divStyle.visibility = "visible"
}
}

function showBlowupInNewWindow(imageFileURL,width,height)
{
// Workaround for Navigator 6
windowOptions = "directories=0,menubar=0,personalbar=0,status=0,resizable=1,width="
windowOptions += width + ",height=" + height
window.open(imageFileURL,"nav6workaround",windowOptions)
}

function hideBlowup(divID)
{
if(document.layers)
{
var divObject = document.layers[divID]
divObject.visibility = "hidden"
}
else if (document.all)
{
// Use IE DHTML
var divStyle = document.all.item(divID).style
divStyle.visibility = "hidden"
}
}

</script>


Greg

Go to Top of Page

siraj
VP-CART New User

USA
194 Posts

Posted - January 28 2004 :  19:58:11  Show Profile  Visit siraj's Homepage  Reply with Quote
I think you are blowing up the thumb nail image to the different size. Id that the case, your image will be pixellated.
Like I said earlier, if you showing a couple of images per page, thats ok. But guess, you are showing 20 product per page in shopdisplayproducts, what could be the load time?
GOOD LUCK.
SJ.

[email protected]
Go to Top of Page

Mark Priest
VP-CART Expert

United Kingdom
580 Posts

Posted - January 29 2004 :  12:38:51  Show Profile  Reply with Quote
Yep thats the code.

They do use a different image for the larger pic.

You can see it here.

<a href="javascript:void(0)" onMouseOver="showBlowup('bigpic','prodpic')">
<img name="prodpic" src="/ecourts/Assets/product_images/410496.jpg" width="100" height="88" border="0" alt="EPSON C900 LASER PRINTER">
</a>
<br>
<small>Move mouse over for larger image</small>
<br><br>
<div id="bigpic" style="position:absolute;height:300;visibility:hidden;margin:-2px;">
<table cellspacing="0" cellpadding="0" border="1">
<tr>
<td>
<a href="javascript:void(0)" onMouseOut="hideBlowup('bigpic')" onClick="hideBlowup('bigpic')">
<img alt="EPSON C900 LASER PRINTER" src="/ecourts/Assets/larger_images/410496_b.jpg" border="0">
</a>


There just using some rather nice DHTML but it would be nice to see what browsers / versions it runs in!



Regards,

Mark
Go to Top of Page

GTM
VP-CART New User

USA
122 Posts

Posted - January 29 2004 :  15:49:54  Show Profile  Reply with Quote
When determining which browsers it does work you could use a sniffer code that would create a fork for the different browsers and versions.

Ex.
http://www.mozilla.org/docs/web-developer/sniffer/browser_type.html

I have to agree with siraj that using that code on the shopdisplayproducts could be detrimental to the load time on a slower connection. You would probally have to use it with the shopexd.asp which would only be the one image.

Greg



Edited by - GTM on January 29 2004 15:50:20
Go to Top of Page

patrickong
VP-CART New User

Singapore
58 Posts

Posted - January 30 2004 :  20:07:22  Show Profile  Visit patrickong's Homepage  Reply with Quote
Hi All,

Don't you think that using with a 56K modem, nothing is fast. Be it a lengthy products page or any graphically rich page?

So an innovative sugestion to enhance the VP-ASP is an auto-popup image but we could let the merchants select whether they want the image to pop-up or not if they feel that their target audience will not be affected by downloading time if the majority of them uses 56K modem right?

Patrick Ong

Go to Top of Page

patrickong
VP-CART New User

Singapore
58 Posts

Posted - January 30 2004 :  20:12:49  Show Profile  Visit patrickong's Homepage  Reply with Quote
Hi,

Ok, I think I've the answer to the downloading question on a page with say 20 products in a row.

If you go to http://www.ecourts.com.sg/eCourts/Default.asp, you'd realise that actually the blowup will only appear in the Extended Product Description page... so the menu on the left that shows a few product varieties do not actually get the pop-up image until they click to see the detailed product description.

So, we could put this code in the Extended Product Description page only so that only 2 images are being downloaded when needed and not all at once.

What do you guys feel?

Patrick Ong

Go to Top of Page
  Previous Topic Topic Next Topic  
 New Topic  Reply to Topic
 Printer Friendly
Jump To:
Snitz Forums 2000
0 Item(s)
$0.00