Customizing ProductCart - Rollover image popup

Print Page | Close Window

Rollover image popup

Printed From: ProductCart E-Commerce Solutions
Category: ProductCart
Forum Name: Customizing ProductCart
Forum Description: Exchange messages with other users that are customizing ProductCart.
URL: https://forum.productcart.com/forum_posts.asp?TID=5350
Printed Date: 21-February-2025 at 4:19pm
Software Version: Web Wiz Forums 12.04 - http://www.webwizforums.com

Topic: Rollover image popup

Posted By: GreggS
Subject: Rollover image popup
Date Posted: 14-November-2012 at 6:40pm

http://www.1st-line.com/machines/comm_mod/esprmach/vibiemme/juniorhx.html" rel="nofollow - http://www.1st-line.com/machines/comm_mod/esprmach/vibiemme/juniorhx.html ***this page has been redirected to our new site
I have a couple pages like this that I want to build into PC where you rollover a link and a picture pops up. With the new site I have less space to work with so I was thinking to have it popup in a window and disappear when you rollout. I found this page and wanted to put in something like this.

http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/" rel="nofollow - http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/
I copied the css part into pcHeaderFooter11.css at the bottom.
I copied the html part into a test page I made.

Will something like this not work in PC?

Replies:

Posted By: Guests
Date Posted: 14-November-2012 at 6:57pm

Hi Gregg,

This is pure CSS and has nothing to do with PC per se. All it does is shove the images way off to the left by default, and then moves them back into the view port on hover.

All you need to do is get more specific (keeping in mind the "Cascading" nature of CSS) with how you're calling the CSS for this.

Posted By: GreggS
Date Posted: 01-May-2013 at 3:11pm

I go this to work finally. Here is an example.

http://www.1st-line.com/store/pc/viewPrd.asp?idproduct=3560" rel="nofollow - http://www.1st-line.com/store/pc/viewPrd.asp?idproduct=3560

I am running into another issue with the HTML editor.

Here is the code for the 1st link.

<a class="thumbnail" href="#thumb">Mirror-polished stainless steel body panel.<img alt="" src="../pc/catalog/vibiemme/djhxmavain/mirror-body.jpg" height="300" width="300"></a>

The problem I run into is when I have to edit the page again. If I use the HTML Editor and save, it removes the 's around the image.

<a class="thumbnail" href="#thumb">Mirror-polished stainless steel body panel.<img alt="" src="../pc/catalog/vibiemme/djhxmavain/mirror-body.jpg" height="300" width="300"></a>

The HTML Editor also does things like replacing the 's with 

I'm guessing it cleans up the code. Is there something I can do so the HTML Editor doesn't do this?