Image rollover in Virtuemart products page

outersquare · Feb 19, 2012

Hey everyone... I'm hoping to add a rollover to the thumbnails on my Virtuemart category page? My site is: Modern Day Hippie

I'm hoping that when the mouse rollovers the image, the image changes to another image (I'm wanting to darken the rollover image and add text - will be all graphics). For an example: LÄRABAR | LÄRABAR Products

Any suggestions on how I can achieve this? Many thanks in advance.

Laxer · Feb 19, 2012

Will you be wanting to do this using javascript or css?

For the simplicity of this if you are just switching images I think css would be better.

outersquare · Feb 20, 2012

Laxer said:
Will you be wanting to do this using javascript or css?

For the simplicity of this if you are just switching images I think css would be better.

Hi Laxer, I think CSS would be the way to go too. How would I go about this? It's a Joomla site as well... I just don't know where to locate the files and what CSS to add.

Thanks again.

Laxer · Feb 20, 2012

When editing a page go into HTML and then post the source here...

We can go from there :grin:

outersquare · Feb 20, 2012

Hey Laxer, I think I know what you mean... this is from the page source.

HTML:

<!DOCTYPE html> <html xml:lang="en-gb" lang="en-gb" > <head>   <base href="http://www.moderndayhippie.com.au/mdh_temp/index.php/products" />   <meta http-equiv="content-type" content="text/html; charset=utf-8" />   <meta name="robots" content="index, follow" />   <meta name="generator" content="Joomla! 1.7 - Open Source Content Management" />   <title>Modern Day Hippie</title>   <link href="/mdh_temp/index.php/products" rel="canonical" />   <link href="/mdh_temp/templates/cornerstone/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />   <link href="http://www.moderndayhippie.com.au/mdh_temp/index.php/component/search/?Itemid=114&format=opensearch" rel="search" title="Search Modern Day Hippie" type="application/opensearchdescription+xml" />   <link rel="stylesheet" href="/mdh_temp/components/com_virtuemart/assets/css/vmsite-ltr.css" type="text/css" />   <link rel="stylesheet" href="/mdh_temp/components/com_virtuemart/assets/css/facebox.css" type="text/css" />   <link rel="stylesheet" href="/mdh_temp/media/system/css/modal.css" type="text/css" />   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>   <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>   <script src="http://www.moderndayhippie.com.au/mdh_temp/components/com_virtuemart/assets/js/jquery.ui.autocomplete.html.js" type="text/javascript"></script>   <script src="/mdh_temp/media/system/js/core.js" type="text/javascript"></script>   <script src="/mdh_temp/components/com_virtuemart/assets/js/vmsite.js" type="text/javascript"></script>   <script src="/mdh_temp/components/com_virtuemart/assets/js/facebox.js" type="text/javascript"></script>   <script src="/mdh_temp/components/com_virtuemart/assets/js/vmprices.js" type="text/javascript"></script>   <script src="/mdh_temp/media/system/js/mootools-core.js" type="text/javascript"></script>   <script src="/mdh_temp/media/system/js/modal.js" type="text/javascript"></script>   <script src="/mdh_temp/media/system/js/mootools-more.js" type="text/javascript"></script>   <script type="text/javascript"> siteurl = 'http://www.moderndayhippie.com.au/mdh_temp/' ; vmCartText = ' was added to your cart.' ; vmCartError = 'There was an error while updating your cart.' ; loadingImage = '/mdh_temp/components/com_virtuemart/assets/images/facebox/loading.gif'  ; closeImage = '/mdh_temp/components/com_virtuemart/assets/images/facebox/closelabel.png' ;  faceboxHtml = "<div id='facebox' style='display:none;'><div class='popup'><div class='content'></div> <a href='#' class='close'><img src='/mdh_temp/components/com_virtuemart/assets/images/facebox/closelabel.png' title='close' class='close_image' /></a></div></div>" ;  		window.addEvent('domready', function() {  			SqueezeBox.initialize({}); 			SqueezeBox.assign($$('a.modal'), { 				parse: 'rel' 			}); 		}); jQuery(document).ready(function () { 	jQuery('.orderlistcontainer').hover( 		function() { jQuery(this).find('.orderlist').stop().show()}, 		function() { jQuery(this).find('.orderlist').stop().hide()} 	) });    </script>   <!-- Loads Master CSS --> <link rel="stylesheet" href="/mdh_temp/templates/cornerstone/css/basic.css" type="text/css" media="screen, projection" />    <!-- Loads additional CSS file to edit/customize or overwrite the base/default classes-->   <link rel="stylesheet" href="/mdh_temp/templates/cornerstone/css/custom.css" type="text/css" media="screen, projection" />  <!-- Loads CSS3 file with some nice modern effects-->     <link rel="stylesheet" href="/mdh_temp/templates/cornerstone/css/css3.css" type="text/css" media="screen, projection" />     <!-- Loads SubTheme CSS file-->   <link rel="stylesheet" href="/mdh_temp/templates/cornerstone/css/subthemes/" type="text/css" media="screen, projection" />  <!--[if IE 7]> <link rel="stylesheet" href="/mdh_temp/templates/cornerstone/css/ie7.css" type="text/css" media="screen, projection"> <![endif]-->      <script type="text/javascript" src="/mdh_temp/templates/cornerstone/js/slimbox.js"></script>   <!-- Add slider height via CSS and primary color--> <style type="text/css"> /*Adding height from template config to header box and mask*/ #box div.slide, .mask1{width:980px;height:420px;} /*Adding primary color from template config to certain css elements*/ {color:#;} {background-color:#;} @font-face {   font-family: Enzo;   src: url("/mdh_temp/templates/cornerstone/fonts/EnzoWeb-Medium.woff") format("woff");   } </style>  <!--Starting Suckerfish Script-->  <script type="text/javascript"><!--//--><![CDATA[//><!-- startList = function() {   if (document.all&&document.getElementById) {     navRoot = document.getElementById("nav");     for (i=0; i<navRoot.childNodes.length; i++) {       node = navRoot.childNodes[i];       if (node.nodeName=="span") {         node.onmouseover=function() {           this.className+=" over";         }         node.onmouseout=function() {           this.className=this.className.replace(" over", "");         }       }     }   } } window.onload=startList;  //--><!]]> </script> <!--Suckerfish Script End-->  <!--Loads FavIcon--> <link rel="shortcut icon" href="/mdh_temp/images/favicon.ico" />   </head> <body>   <!-- Checks if frontage is active, if so adds class on_frontpage to the whole template body--> <!-- Overlay moduleposition "above" -->    <!-- ****************** Wrapper Start ****************** --> <div class="wrapper">   <div class="inner_wrapper">     <div class="header_wrapper"> <!-- This container includes the whole top and header area--> <!-- ****************** Top Area with Logo, topmenu etc.****************** -->       <div class="top"> 			<div class="container"> 							<div class="logo"> 					<h1><a href="/mdh_temp"><img src="/mdh_temp/templates/cornerstone/images/logo.png" alt="Modern Day Hippie"  /></a></h1> 				</div> 						 						 						 						<nav> 				<div class="topmenu"> 					 <ul class="menu"> <li class="item-101"><a href="/mdh_temp/" >Home</a></li><li class="item-134"><a href="/mdh_temp/index.php/blog" >Body</a></li><li class="item-135"><a href="/mdh_temp/index.php/blog-2" >Mind</a></li><li class="item-114 current active"><a href="/mdh_temp/index.php/products" >Products</a></li><li class="item-124"><a href="/mdh_temp/index.php/testimonials" >Testimonials</a></li><li class="item-123"><a href="/mdh_temp/index.php/contact" >Contact</a></li></ul> 				 				</div> 			</nav> 						 							<div class="minimenu"> 					 <ul class="menu"> <li class="item-108"><a href="/mdh_temp/" >Home</a></li><li class="item-109"><a href="/mdh_temp/index.php/component/virtuemart/cart/products" >Cart</a></li><li class="item-110"><a href="/mdh_temp/index.php/login" >Login</a></li><li class="item-111"><a href="/mdh_temp/index.php/customer-profile" >Customer Profile</a></li></ul> 	 				</div> 						 							<div class="top_right_corner"> 					<form action="/mdh_temp/index.php/products" method="post"> 	<div class="search"> 		<label for="mod-search-searchword">Search...</label><input name="searchword" id="mod-search-searchword" maxlength="20"  class="inputbox" type="text" size="20" value="Search..."  onblur="if (this.value=='') this.value='Search...';" onfocus="if (this.value=='Search...') this.value='';" />	<input type="hidden" name="task" value="search" /> 	<input type="hidden" name="option" value="com_search" /> 	<input type="hidden" name="Itemid" value="114" /> 	</div> </form> 	 				</div> 							<hr /> 			</div> 		</div>      <!-- ****************** Header Area with Header image, top modules etc. ****************** -->              </div> <!-- div.header_wrapper ends here-->    <!-- ****************** Main Area with all main content ****************** -->     <div class="main header_inactive">       <div class="container">       <hr />                    <!-- Including breadcrumbs navigation -->         							<div class="block1 pathway_nav"> 					 <div class="breadcrumbs"> <span class="showHere">You are here: </span><a href="/mdh_temp/" class="pathway">Home</a> <img src="/mdh_temp/templates/cornerstone/images/system/arrow.png" alt=""  /> <span>Products</span></div>  				</div> 				<hr /> 			                                                 <!-- Including inner content area -->          <div class="block0 inner_content">	 <!--One 100% Block--> 				 		<!--Left Block--> 		 			<!-- Main component--> 			<div class="											block23 center_block  border									"> 				 <div id="system-message-container"> </div> 									 <div class="category_description"> 	</div> <div class="browse-view"> 	<h1>Modern Day Hippie</h1> 	<form action="/mdh_temp/index.php/products" method="get"> 				<div class="orderby-displaynumber"> 			<div class="orderlistcontainer"><div class="title">Sort by</div><div class="activeOrder"><a title=" +/-" href="/mdh_temp/index.php/products/desc">Product Name  +/-</a></div></div>			<div class="display-number"> Results 1 - 7 of 7 <select id="limit" name="limit" class="inputbox" size="1" onchange="window.top.location.href=this.options[this.selectedIndex].value">> 	<option value="0">all</option> 	<option value="/mdh_temp/index.php/products?limit=3">3</option> 	<option value="/mdh_temp/index.php/products?limit=6">6</option> 	<option value="/mdh_temp/index.php/products?limit=9">9</option> 	<option value="/mdh_temp/index.php/products?limit=12">12</option> 	<option value="/mdh_temp/index.php/products?limit=30">30</option> 	<option value="/mdh_temp/index.php/products?limit=60">60</option> </select> </div> 		</div> 	</form> 		<div class="row"> 				<div class="product floatleft width33 vertical-separator"> 			<div class="spacer"> 				<div> 					<a title="cafferia186-237" class="modal" href="http://www.moderndayhippie.com.au/mdh_temp/images/stories/virtuemart/product/cafferia186-237.jpg"><img src="/mdh_temp/images/stories/virtuemart/product/resized/Cafferia186-237-resized.jpg" alt="cafferia186-237" class="browseProductImage" border="0" title="Cafferia Coffee"  /></a>					 					<!-- The "Average Customer Rating" Part --> 									</div> 				<div> 					<h3 class="catProductTitle"><a href="/mdh_temp/index.php/products/cafferia-coffee-17-detail" >Cafferia Coffee</a></h3> 										<p class="product_s_desc"> 						Lorem ipsum dolor sit amet, consectetur...					</p> 															<div class="stockLavel"> 						<span class="vmicon vm2-normalstock" title="We have plenty of stock for this product"></span> 						<span class="stock-level">Current Stock Level</span> 					</div> 										<div class="catProductPrice" id="productPrice18"> 						<div class="PricesalesPrice" style="display : block;" ><span class="PricesalesPrice" >$27.31</span></div><div class="PricetaxAmount" style="display : block;" >Tax amount: <span class="PricetaxAmount" >$2.31</span></div>					</div> 					<a href="/mdh_temp/index.php/products/cafferia-coffee-17-detail" title="Cafferia Coffee" class="catProductDetails">Product details</a>				</div> 			</div> 		</div> 				<div class="product floatleft width33 vertical-separator"> 			<div class="spacer"> 				<div> 					<a title="cafferia186-237" class="modal" href="http://www.moderndayhippie.com.au/mdh_temp/images/stories/virtuemart/product/cafferia186-237.jpg"><img src="/mdh_temp/images/stories/virtuemart/product/resized/Cafferia186-237-resized.jpg" alt="cafferia186-237" class="browseProductImage" border="0" title="Cafferia Coffee"  /></a>					 					<!-- The "Average Customer Rating" Part --> 									</div> 				<div> 					<h3 class="catProductTitle"><a href="/mdh_temp/index.php/products/cafferia-coffee-17-18-19-20-21-22-detail" >Cafferia Coffee</a></h3> 										<p class="product_s_desc"> 						Lorem ipsum dolor sit amet, consectetur...					</p> 															<div class="stockLavel"> 						<span class="vmicon vm2-normalstock" title="We have plenty of stock for this product"></span> 						<span class="stock-level">Current Stock Level</span> 					</div> 										<div class="catProductPrice" id="productPrice23"> 						<div class="PricesalesPrice" style="display : block;" ><span class="PricesalesPrice" >$27.31</span></div><div class="PricetaxAmount" style="display : block;" >Tax amount: <span class="PricetaxAmount" >$2.31</span></div>					</div> 					<a href="/mdh_temp/index.php/products/cafferia-coffee-17-18-19-20-21-22-detail" title="Cafferia Coffee" class="catProductDetails">Product details</a>				</div> 			</div> 		</div> 				<div class="product floatleft width33 "> 			<div class="spacer"> 				<div> 					<a title="cafferia186-237" class="modal" href="http://www.moderndayhippie.com.au/mdh_temp/images/stories/virtuemart/product/cafferia186-237.jpg"><img src="/mdh_temp/images/stories/virtuemart/product/resized/Cafferia186-237-resized.jpg" alt="cafferia186-237" class="browseProductImage" border="0" title="Cafferia Coffee"  /></a>					 					<!-- The "Average Customer Rating" Part --> 									</div> 				<div> 					<h3 class="catProductTitle"><a href="/mdh_temp/index.php/products/cafferia-coffee-17-18-19-20-21-detail" >Cafferia Coffee</a></h3> 										<p class="product_s_desc"> 						Lorem ipsum dolor sit amet, consectetur...					</p> 															<div class="stockLavel"> 						<span class="vmicon vm2-normalstock" title="We have plenty of stock for this product"></span> 						<span class="stock-level">Current Stock Level</span> 					</div> 										<div class="catProductPrice" id="productPrice22"> 						<div class="PricesalesPrice" style="display : block;" ><span class="PricesalesPrice" >$27.31</span></div><div class="PricetaxAmount" style="display : block;" >Tax amount: <span class="PricetaxAmount" >$2.31</span></div>					</div> 					<a href="/mdh_temp/index.php/products/cafferia-coffee-17-18-19-20-21-detail" title="Cafferia Coffee" class="catProductDetails">Product details</a>				</div> 			</div> 		</div> 			</div> 		<div class="horizontal-separator"></div> 		<div class="row"> 				<div class="product floatleft width33 vertical-separator"> 			<div class="spacer"> 				<div> 					<a title="cafferia186-237" class="modal" href="http://www.moderndayhippie.com.au/mdh_temp/images/stories/virtuemart/product/cafferia186-237.jpg"><img src="/mdh_temp/images/stories/virtuemart/product/resized/Cafferia186-237-resized.jpg" alt="cafferia186-237" class="browseProductImage" border="0" title="Cafferia Coffee"  /></a>					 					<!-- The "Average Customer Rating" Part --> 									</div> 				<div> 					<h3 class="catProductTitle"><a href="/mdh_temp/index.php/products/cafferia-coffee-17-18-19-20-detail" >Cafferia Coffee</a></h3> 										<p class="product_s_desc"> 						Lorem ipsum dolor sit amet, consectetur...					</p> 															<div class="stockLavel"> 						<span class="vmicon vm2-normalstock" title="We have plenty of stock for this product"></span> 						<span class="stock-level">Current Stock Level</span> 					</div> 										<div class="catProductPrice" id="productPrice21"> 						<div class="PricesalesPrice" style="display : block;" ><span class="PricesalesPrice" >$27.31</span></div><div class="PricetaxAmount" style="display : block;" >Tax amount: <span class="PricetaxAmount" >$2.31</span></div>					</div> 					<a href="/mdh_temp/index.php/products/cafferia-coffee-17-18-19-20-detail" title="Cafferia Coffee" class="catProductDetails">Product details</a>				</div> 			</div> 		</div> 				<div class="product floatleft width33 vertical-separator"> 			<div class="spacer"> 				<div> 					<a title="cafferia186-237" class="modal" href="http://www.moderndayhippie.com.au/mdh_temp/images/stories/virtuemart/product/cafferia186-237.jpg"><img src="/mdh_temp/images/stories/virtuemart/product/resized/Cafferia186-237-resized.jpg" alt="cafferia186-237" class="browseProductImage" border="0" title="Cafferia Coffee"  /></a>					 					<!-- The "Average Customer Rating" Part --> 									</div> 				<div> 					<h3 class="catProductTitle"><a href="/mdh_temp/index.php/products/cafferia-coffee-17-18-19-detail" >Cafferia Coffee</a></h3> 										<p class="product_s_desc"> 						Lorem ipsum dolor sit amet, consectetur...					</p> 															<div class="stockLavel"> 						<span class="vmicon vm2-normalstock" title="We have plenty of stock for this product"></span> 						<span class="stock-level">Current Stock Level</span> 					</div> 										<div class="catProductPrice" id="productPrice20"> 						<div class="PricesalesPrice" style="display : block;" ><span class="PricesalesPrice" >$27.31</span></div><div class="PricetaxAmount" style="display : block;" >Tax amount: <span class="PricetaxAmount" >$2.31</span></div>					</div> 					<a href="/mdh_temp/index.php/products/cafferia-coffee-17-18-19-detail" title="Cafferia Coffee" class="catProductDetails">Product details</a>				</div> 			</div> 		</div> 				<div class="product floatleft width33 "> 			<div class="spacer"> 				<div> 					<a title="cafferia186-237" class="modal" href="http://www.moderndayhippie.com.au/mdh_temp/images/stories/virtuemart/product/cafferia186-237.jpg"><img src="/mdh_temp/images/stories/virtuemart/product/resized/Cafferia186-237-resized.jpg" alt="cafferia186-237" class="browseProductImage" border="0" title="Cafferia Coffee"  /></a>					 					<!-- The "Average Customer Rating" Part --> 									</div> 				<div> 					<h3 class="catProductTitle"><a href="/mdh_temp/index.php/products/cafferia-coffee-17-18-detail" >Cafferia Coffee</a></h3> 										<p class="product_s_desc"> 						Lorem ipsum dolor sit amet, consectetur...					</p> 															<div class="stockLavel"> 						<span class="vmicon vm2-normalstock" title="We have plenty of stock for this product"></span> 						<span class="stock-level">Current Stock Level</span> 					</div> 										<div class="catProductPrice" id="productPrice19"> 						<div class="PricesalesPrice" style="display : block;" ><span class="PricesalesPrice" >$27.31</span></div><div class="PricetaxAmount" style="display : block;" >Tax amount: <span class="PricetaxAmount" >$2.31</span></div>					</div> 					<a href="/mdh_temp/index.php/products/cafferia-coffee-17-18-detail" title="Cafferia Coffee" class="catProductDetails">Product details</a>				</div> 			</div> 		</div> 			</div> 		<div class="horizontal-separator"></div> 		<div class="row"> 				<div class="product floatleft width33 vertical-separator"> 			<div class="spacer"> 				<div> 					<a title="cafferia186-237" class="modal" href="http://www.moderndayhippie.com.au/mdh_temp/images/stories/virtuemart/product/cafferia186-237.jpg"><img src="/mdh_temp/images/stories/virtuemart/product/resized/Cafferia186-237-resized.jpg" alt="cafferia186-237" class="browseProductImage" border="0" title="Cafferia Coffee 1"  /></a>					 					<!-- The "Average Customer Rating" Part --> 									</div> 				<div> 					<h3 class="catProductTitle"><a href="/mdh_temp/index.php/products/cafferia-coffee-detail" >Cafferia Coffee 1</a></h3> 										<p class="product_s_desc"> 						Lorem ipsum dolor sit amet, consectetur...					</p> 															<div class="stockLavel"> 						<span class="vmicon vm2-normalstock" title="We have plenty of stock for this product"></span> 						<span class="stock-level">Current Stock Level</span> 					</div> 										<div class="catProductPrice" id="productPrice17"> 						<div class="PricesalesPrice" style="display : block;" ><span class="PricesalesPrice" >$27.31</span></div><div class="PricetaxAmount" style="display : block;" >Tax amount: <span class="PricetaxAmount" >$2.31</span></div>					</div> 					<a href="/mdh_temp/index.php/products/cafferia-coffee-detail" title="Cafferia Coffee 1" class="catProductDetails">Product details</a>				</div> 			</div> 		</div> 			<div class="clear"></div> </div> <div class="pagination"> 	</div> </div>  							</div> 		<!--Right Block--> 				<aside> 			<div class="block3 right_block lastblock">  						<div class="moduletable"> 					 <!-- Currency Selector Module --> <form action="http://www.moderndayhippie.com.au/mdh_temp/index.php/products" method="post"> 	 	<select id="virtuemart_currency_id" name="virtuemart_currency_id" class="inputbox"> 	<option value="9" selected="selected">Australian dollar $</option> 	<option value="52">British pound £</option> 	<option value="47">Euro €</option> 	<option value="144">United States dollar $</option> </select>     <input class="button" type="submit" name="submit" value="Change Currency" /> </form> 		</div> 			<div class="moduletable"> 					  <div class="custom"  > 	<p><img src="/mdh_temp/images/ad.jpeg" alt="ad" height="280" width="280" /></p></div> 		</div> 	 			</div> 		</aside> 				<hr /> 					</div>                 </div>     </div> <!-- ****************** Footer Area ****************** -->             <!-- Including footer content area -->       <footer> 	<div class="footer"> 		<div class="container"> 		 		<!--Five 20% Blocks--> 					<div class="block5 footer_left"> 						<div class="moduletable"> 					  <div class="custom"  > 	<p style="padding-top: 5px;"><span style="color: #ffffff;">Copyright 2012 Modern Day Hippie. All Rights Reserved.</span></p></div> 		</div> 	 			</div> 					 		 			 		 			 		 				 					<div class="block5 footer_right lastblock"> 						<div class="moduletable"> 					  <div class="custom"  > 	<p style="text-align: right;"><span style="color: #ffffff;">Website by  <img title="Thinking Hats" src="/mdh_temp/images/thinkinghatswht.png" alt="thinkinghatswht" height="20" width="22" />  <a href="http://www.thinkinghats.net.au" title="Thinking Hats" target="_blank"><span style="color: #ffffff;">Thinking Hats</span></a></span></p></div> 		</div> 	 			</div> 					<hr /> 		</div> 				</div> </footer>       </div> <!-- div.inner_wrapper ends here--> </div> <!-- div.wrapper ends here-->  <!-- Including subfooter content area --> <div class="subfooter"> 	<div class="container"> 	 	<!--Sub Footer Block--> 		  		 		 		 <hr /> 	 	<!--Debug--> 		 	<hr /> </div>            </body> </html>

Laxer · Feb 20, 2012

Thank you, this is exactly what I wanted :grin:

This is the code for each product:

HTML:

<a title="cafferia186-237" class="modal" href="http://www.moderndayhippie.com.au/mdh_temp/images/stories/virtuemart/product/cafferia186-237.jpg"><img src="/mdh_temp/images/stories/virtuemart/product/resized/Cafferia186-237-resized.jpg" alt="cafferia186-237" class="browseProductImage" border="0" title="Cafferia Coffee"  /></a>

We could so something with CSS similar to this: http://brassblogs.com/blog/css-image-swap

Which would work great for a few amount of products but not so good for a large amount of products.

The link you provided does something similar but with javascript:

HTML:

<li class="padding_modifier" style="width:164px;height:80px;" onmouseover="$('#product_28').toggle(); $('#over_28').toggle();" onmouseout="$('#product_28').toggle(); $('#over_28').toggle();">

					<a href="/products/apple-turnover" id="product_28"><img alt="Apple Turnover" src="http://s3.amazonaws.com/jo.www.larabar.com.2011/uploads/product/thumbnail_images/28/thumb.jpg" /></a><!--

					--><a href="/products/apple-turnover" id="over_28" style="display:none;"><img alt="Apple Turnover" src="http://s3.amazonaws.com/jo.www.larabar.com.2011/uploads/product/rollover_images/28/thumb.jpg" /></a><!--commenting the break in upper line avoids generating a cufon canvas tag between the a tags-->

			    </li>

Does any of this make sense to you? (trying to judge how complex of a script I should provide you with)

outersquare · Feb 20, 2012

Hi Laxer, both seem good. My only worry about the css is that there may be quite a few products that would require rollovers... (min 10?)

Will the javascript be easy to implement? And whereabouts would I place it?
Also how would I got about making the image a link to the actual product... just do I can make all the other details redundant on that page and just show the product (similar to the provided link I showed you).

Also being Joomla, using the javascript solution, will it be easy for me to change the products still via Virtuemart?

Thanks again Laxer.

outersquare · Feb 22, 2012

Hey again Laxer, was I meant to use one of the codes you mentioned or am I waiting on a response from you? Thanks again mate, let me know how you go.

Laxer · Feb 24, 2012

Sorry had a busy last few days(Mid-terms coming up)

Anyway, both will work. I think the JS solution would be better but I don't how well it will incorporate into Joomla...

Random thought....

Have you looked into plugins for joomla?

Hover Box Gallery Module - Joomla! Extensions Directory
SimpleHoverEffect - Joomla! Extensions Directory

outersquare · Feb 25, 2012

Thanks Laxer. Your mid-terms should be priority so don't apologise!

I'll try the js one and see how it goes, whereabouts should I place it? In the site's main .php? Or the .php for virtue mart?

I've looked at various plugins and extensions for Joomla but I could work out how to link the images with the product? It got a little messy.

Thanks again Laxer.

Image rollover in Virtuemart products page

outersquare

Laxer

outersquare

Laxer

outersquare

Attachments

Laxer

outersquare

outersquare

Laxer

outersquare

Top Contributors this Month