Go Back   Tech Support Forum > Design Forum > Web Design & Development

Image rollover in Virtuemart products page

This is a discussion on Image rollover in Virtuemart products page within the Web Design & Development forums, part of the Tech Support Forum category.


Reply
 
Thread Tools Search this Thread
Old 02-19-2012, 07:49 AM   #1
Registered Member
 
Join Date: Aug 2011
Posts: 39
OS: Mac OSX


Question

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.

__________________
outersquare is offline   Reply With Quote
Old 02-19-2012, 03:02 PM   #2
TSF Team, Emeritus
 
Laxer's Avatar
 
Join Date: Dec 2010
Location: Salem, OR
Posts: 5,037
OS: Win7 Ultimate x64

My System


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.

__________________

..Notepad++ | CoffeeCup | WAMP | GIMP | VLC | Debut | CometBird | Web Dev
Laxer is offline   Reply With Quote
Old 02-20-2012, 12:08 AM   #3
Registered Member
 
Join Date: Aug 2011
Posts: 39
OS: Mac OSX


Quote:
Originally Posted by Laxer
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.
__________________
outersquare is offline   Reply With Quote
Old 02-20-2012, 12:47 AM   #4
TSF Team, Emeritus
 
Laxer's Avatar
 
Join Date: Dec 2010
Location: Salem, OR
Posts: 5,037
OS: Win7 Ultimate x64

My System


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

We can go from there
__________________

..Notepad++ | CoffeeCup | WAMP | GIMP | VLC | Debut | CometBird | Web Dev
Laxer is offline   Reply With Quote
Old 02-20-2012, 01:11 AM   #5
Registered Member
 
Join Date: Aug 2011
Posts: 39
OS: Mac OSX



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

HTML Code:
<!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&amp;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 &pound;</option> 	<option value="47">Euro &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&nbsp; <img title="Thinking Hats" src="/mdh_temp/images/thinkinghatswht.png" alt="thinkinghatswht" height="20" width="22" />&nbsp; <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>
Attached Files
File Type: txt MDH html.txt (32.5 KB, 16 views)
__________________
outersquare is offline   Reply With Quote
Old 02-20-2012, 02:02 AM   #6
TSF Team, Emeritus
 
Laxer's Avatar
 
Join Date: Dec 2010
Location: Salem, OR
Posts: 5,037
OS: Win7 Ultimate x64

My System


Thank you, this is exactly what I wanted

This is the code for each product:
HTML Code:
<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 Code:
<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)
__________________

..Notepad++ | CoffeeCup | WAMP | GIMP | VLC | Debut | CometBird | Web Dev
Laxer is offline   Reply With Quote
Old 02-20-2012, 06:08 AM   #7
Registered Member
 
Join Date: Aug 2011
Posts: 39
OS: Mac OSX



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 is offline   Reply With Quote
Old 02-22-2012, 03:07 AM   #8
Registered Member
 
Join Date: Aug 2011
Posts: 39
OS: Mac OSX



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.
__________________
outersquare is offline   Reply With Quote
Old 02-24-2012, 12:07 AM   #9
TSF Team, Emeritus
 
Laxer's Avatar
 
Join Date: Dec 2010
Location: Salem, OR
Posts: 5,037
OS: Win7 Ultimate x64

My System


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
__________________

..Notepad++ | CoffeeCup | WAMP | GIMP | VLC | Debut | CometBird | Web Dev
Laxer is offline   Reply With Quote
Old 02-25-2012, 01:34 AM   #10
Registered Member
 
Join Date: Aug 2011
Posts: 39
OS: Mac OSX


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.

__________________
outersquare is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Similar Threads
Thread Thread Starter Forum Replies Last Post
Geekette in the making
:wavey: Nice forum you have here.
DonnaB Introductions 18 02-29-2012 04:40 PM
[SOLVED] Reboot and select a proper boot device or insert boot media in selected boot
Had a new laptop for a week and it's been fine, was downloading some stuff and had it on lock, when I got back it was totally frozen, now im getting this message. Whenever I tried doing a backup it failed so I dont have a disk and it's not letting me into the bios settings screen? Argh, any help?...
chrisredmayne Laptop Support 9 02-29-2012 01:58 PM
Computer keyboard Not working in bios and ubuntu
my keyboard works well with windows 7 but on bios and ubuntu it work like rubbish. when i press spacebar it types "zxcvb" when i press up button it response with other buttons +enter button when i press backspace it highlights what is written and do other commands. it takes time for me just to...
Jibarah Laptop Support 5 02-21-2012 09:07 AM
PC just load but nothing in the screen
Good afternoon, I have a desktop computer with windows XP, the pc loads but the light of the monitor is just blinking(nothing on the screen), and the pc is just creating a soft noise, sorry i am very bad in english, thanks
vongolamist Windows XP Support 2 02-19-2012 02:35 PM

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is on
Smilies are on
[IMG] code is on
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off


Post a Question


» Site Navigation
 > FAQ
  > 10.0.0.2


All times are GMT -7. The time now is 12:16 AM.


Copyright 2001 - 2014, Tech Support Forum

Windows 7 - Windows XP - Windows Vista - Trojan Removal - Spyware Removal - Virus Removal - Networking - Security - Top Web Hosts