Solved

onmouseover swapimage not working in IE

Posted on 2013-12-13

JavaScript

1 solution

Medium Priority

612 Views

Last Modified: 2013-12-13

The goal is to hover over a sentence in the left column, and the image pops up in right column. Works in Chrome and other browsers, BUT NOT IN IE versions previous to 11. If I didn't need this right away I'd find a better alternative. Don't know how to troubleshoot this. Many thanks for your thoughts.

Here's the image swap stuff.

<a href="#" onclick="null()"><li onmouseover="MM_swapImage('0','','images/services/1.jpg',1)" onmouseout="MM_swapImgRestore()">Invitation design and management</li></a>

Here's the javascript:

<script type="text/javascript">
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>

Open in new window

Comment

Question by:meldraper

[X]

Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

Help others & share knowledge
Earn cash & points
Learn & ask questions

Join The Community

20 Comments

LVL 82

Expert Comment

by:leakim971

ID: 397163452013-12-13

validate your page here : http://validator.w3.org/

Author Comment

by:meldraper

ID: 397163652013-12-13

Well, ok, thanks, but I already did that. I'm not a javascript guru, I have NO idea how to fix the issues it returns. Posting a question here is my last resort. Here's the link to the page. http://66.223.52.136/servicesold.asp

LVL 82

Expert Comment

by:leakim971

ID: 397163742013-12-13

the error is not javascript errors but HTML errors
For example we can see an HTML tag inside an HTML document, this is not Javascript.

Javascript need valid content to play.

LVL 44

Expert Comment

by:Rainer Jeschor

ID: 397164392013-12-13

Hi,
+1 for leakim971 comment. Your complete HTML source is messed up. jQuery (and browsers) depend on a consistent and valid DOM - otherwise a lot of things can happen.

Your HTML should more look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Events By Reese</title>
		<link href="ebr13.css" rel="stylesheet" type="text/css" />
		<link rel="stylesheet" type="text/css" href="linotypeUnivers_Compressed/linotypeUnivers_Compressed.css">
		<link rel="stylesheet"href="/slider/layerslider/css/layerslider.css"type="text/css">
		<!--[if lt IE 9]>
			<script src="/slider/assets/js/html5.js"></script>
		<![endif]-->
		<script type="text/javascript">
			function MM_preloadImages() { //v3.0
				var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
				var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
				if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
			}

			function MM_swapImgRestore() { //v3.0
				var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
			}

			function MM_findObj(n, d) { //v4.01
				var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
					d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
				if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
				for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
				if(!x && d.getElementById) x=d.getElementById(n); return x;
			}

			function MM_swapImage() { //v3.0
				var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
				if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
			}
		</script>
		<script src="/slider/layerslider/jQuery/jquery.js"type="text/javascript"></script>
		<script src="/slider/layerslider/jQuery/jquery-easing-1.3.js"type="text/javascript"></script>
		<script src="/slider/layerslider/jQuery/jquery-transit-modified.js"type="text/javascript"></script>
		<script src="/slider/layerslider/js/layerslider.transitions.js"type="text/javascript"></script>
		<script src="/slider/layerslider/js/layerslider.kreaturamedia.jquery.js"type="text/javascript"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$('#layerslider').layerSlider({
					skinsPath : '/slider/layerslider/skins/',
					skin : 'minimal',
					thumbnailNavigation : 'hover',
					hoverPrevNext : false,
					autoPlayVideos : false
				});
				MM_preloadImages('images/services/1.jpg');
			});		
		</script>		
	</head>
	<body>
		<div id="headerWrap">
			<div id="headerNavLeft">
				<a href="index.asp">Home</a>
				<a href="services.asp"  class="current">Services</a>
				<a href="gallery.asp">Photos</a>
				<a href="about.asp">Team</a>
				<a href="press.asp">Press</a>
			</div><!-- headerNavLeft -->
			<div id="headerLogo">
				<a href="index.asp"><img src="images/logoHeader.png" border="0" /></a>
			</div><!-- headerLogo -->
			<div id="headerNavRight">
				<a href="siscompanies.html">Sister Companies</a>
				<a href="tv.html">TV Show</a>
				<a href="http://ebrgroup.wordpress.com/" target="_blank">Blog</a>
				<a href="contact.asp">Contact</a>
			</div><!-- headerNavRight -->
			<div style="clear: both;"></div>
		</div><!-- headerWrap -->
		<div id="headerBKG"></div><!-- headerBKG -->
		<div id="picMain">
			<style type="text/css"media="screen">
				.ls-layer,
				.ls-layer * {
					font-family: Arial, Serif;
					white-space: nowrap;
					font-weight: normal;
					text-shadow: none;
				}
				
				.br5 {
					border-radius: 5px;
				}
				
				.c {
					text-align: center;
				}

				.sl1, .sl2 {
					font-size: 50px;
					line-height: 100px;
					height: 100px;				
				}

				.sl1 {
					color: #eee;
					background: black;
					background: rgba(0,0,0,.75);
				}
				
				.sl2 {
					color: #444;
					background: white;
				}
				
				.red,
				.black,
				.white {
					line-height: 70px;
					font-size: 40px;
				}
				
				.red {
					color: white;
					background: #cf431d;
				}
				
				.black {
					background: black;
					background: rgba(0,0,0,.75);
					color: white;
				}

				.white {
					color: #444;
					background: white;
				}

				.plus1,
				.plus2,
				.plus3,
				.plus4,
				.br100 {
					border-radius: 100px;
					-moz-border-radius: 100px;
					-webkit-border-radius: 100px;				
				}

				.plus1,
				.plus2,
				.plus3,
				.plus4 {
					text-align: center;
					width: 50px;
					height: 50px; 
					font-size: 50px;
					line-height: 50px;
				}
				
				.plus1 {
					color: #eee;
					background: #2e69ad;
				}

				.plus2 {
					color: #224177;
					background: #eee;
				}

				.plus3 {
					color: #3b173d;
					background: #eee;
				}
				
				.plus4 {
					 color: white;
					background: #85c201;
				}
				
				.text1,
				.text2,
				.text3,
				.text4,
				.text5,
				.text6,
				.text7 {
					font-size: 30px;
				}
				
				.text1 {
					color: #f0f6fd;
				}

				.text2 {
					padding: 10px 25px 10px 25px;
					color: #f0f6fd;
					background: #2e69ad;
				}

				.text3 {
					padding: 10px 25px 10px 25px;
					color: #2e69ad;
					background: #f0f6fd;
				}

				.text4 {
					text-shadow: 0px 0px 20px #224177;
					color: #eee;
				}

				.text5 {
					padding: 10px 25px;
					color: #224177;
					background: #eee;
				}
				
				.text6 {
					color: #eee;				
				}
				
				.text7 {
					 color: #85c201;
				}

				.text-a {
					font-weight: bold;
					padding: 15px 30px 15px 30px;
					font-size: 80px;
					color: #f4f8fc;
				}
				
				.text-b {
					box-shadow: -2px -2px 15px -3px black;
					border-radius: 0px;
					padding: 5px 60px;
					font-size: 60px;
					color: #d85127;
					background: white;
				}
				
				.text-c {
					box-shadow: -2px -2px 15px -3px black;
					border-radius: 0px;
					padding: 10px 40px;
					font-size: 50px;
					color: white;
					background: #d85127;
				}
				
				.text-d {
					box-shadow: -3px -3px 20px -3px black;
					border-radius: 0px;
					padding: 10px 60px;
					font-size: 50px;
					color: #d85127;
					background: white;
				}

				.text-e {
					padding: 4px 15px 7px 15px;
					font-size: 24px;
					color: #444f70;
					background: #ffffff;
				}
				
				.text-f {
					font-size: 60px;
					color: #ff7700;				
				}

			</style>
			<div id="layerslider-container" align="center">
			<!--LayerSlider begin-->
				<div id="layerslider"style="width: 1000px; height: 600px; margin: 0 auto;" align="center">
					<!--LayerSlider layer-->		
					<div class="ls-layer"style="slidedelay: 5000; transition2d: 83, 85, 14; ">
						<!--LayerSlider background-->       
						<img src="/slider/gallery/bgServices1.jpg" class="ls-bg" alt="Slide background">
						<!--LayerSlider sublayers-->
						<img src="/slider/gallery/bgServices2.png" class="ls-s-1" alt="layer1-sublayer1" style="left: 20px; top: 18px; slidedirection:bottom; durationin:2000; easingin : easeOutQuart; delayin : 0;">
						<img src="/slider/gallery/bgServices3.png" class="ls-s-1" alt="layer1-sublayer2" style="left: 25px; top: 5px;slidedirection : top; durationin : 2000; easingin : easeOutQuart; delayin : 0;">
					</div>
		       	</div>
			</div>
			<!--LayerSlider end-->
		</div><!-- picMain -->
		<br>
		<br>
		<div id="contentWrap">
			<div id="contentMain">
				<p style="margin-bottom: 50px; margin-top: 0px; border-bottom: 1px dashed #666; padding-bottom: 20px; text-align: left;">Our full-service teams are able to manage the entire planning and production process – from booking the band to sending you down the aisle!
				When you book your event with us, you are placed in the hands of a masterful team of professionals, each dedicated to distinct aspects of the event process, who are by your side every step of the way. Each team consists of a Lead Producer, an Assistant Producer, and a Creative Producer – all with specialized tasks and talents, all working together in unison.
				Our teams work diligently, creatively, and collectively so you can leave the details to us and enjoy every minute of your special day.
				<br>
				<br>
				</p>
			</div><!-- contentMain -->
			<div id="bottom">
				<div id="colleft">
					<p style="font-size:28px;" id="colleftp">OUR SERVICES INCLUDE, BUT ARE NOT LIMITED TO:</p>
					<p style="font-size:21px;" id="colleftp">Full-Planning Services</p>
					<ul id="colleftp">
						<a href="#" onclick="null()"><li onmouseover="MM_swapImage('0','','images/services/1.jpg',1)" onmouseout="MM_swapImgRestore()">Invitation design and management</li></a>
						<a href="#" onclick="null()"><li onmouseover="MM_swapImage('0','','images/services/2.jpg',1)" onmouseout="MM_swapImgRestore()">Guest accommodation planner</li></a>
						<a href="#" onclick="null()"><li onmouseover="MM_swapImage('0','','images/services/3.jpg',1)" onmouseout="MM_swapImgRestore()">Venue research and management</li></a>
						<a href="#" onclick="null()"><li onmouseover="MM_swapImage('0','','images/services/4.jpg',1)" onmouseout="MM_swapImgRestore()">Food and beverage management</li></a>
					</ul>
					<p style="font-size:21px;" id="colleftp">Entertainment Management</p>
					<ul id="colleftp">
						<a href="#" onclick="null()"><li onmouseover="MM_swapImage('0','','images/services/5.jpg',1)" onmouseout="MM_swapImgRestore()">Management  of all vendors hired by the client</li></a>
						<a href="#" onclick="null()"><li onmouseover="MM_swapImage('0','','images/services/6.jpg',1)" onmouseout="MM_swapImgRestore()">Full orchestration of event from start to finish</li></a>
					</ul>
					<p style="font-size:21px;" id="colleftp">Design and Décor Services</p>
					<ul id="colleftp">
						<a href="#" onclick="null()"><li onmouseover="MM_swapImage('0','','images/services/7.jpg',1)" onmouseout="MM_swapImgRestore()">Overall event design and management</li></a>
						<a href="#" onclick="null()"><li onmouseover="MM_swapImage('0','','images/services/8.jpg',1)" onmouseout="MM_swapImgRestore()">Floral design and production</li></a>
						<a href="#" onclick="null()"><li onmouseover="MM_swapImage('0','','images/services/9.jpg',1)" onmouseout="MM_swapImgRestore()">Management of rentals</li></a>
						<a href="#" onclick="null()"><li onmouseover="MM_swapImage('0','','images/services/10.jpg',1)" onmouseout="MM_swapImgRestore()">Lighting design and production</li></a>
						<a href="#" onclick="null()"><li onmouseover="MM_swapImage('0','','images/services/11.jpg',1)" onmouseout="MM_swapImgRestore()">Space planning and rendering</li></a>
					</ul>
				</div>
				<div id="colright">
					<img src="images/services/0.jpg" id="0">
				</div>
			</div>	
			<div style="clear: both; height: 40px;"></div>
			<div id="catMain" style="padding-bottom: 40px;">
				<div id="catBox">
					<a href="planningHome.asp"><img src="images/imgBoxPlan.jpg" border="0" style="margin-top: 3px;" /></a>
				</div><!-- catBot -->
				<div id="catBox">
					<a href="floralHome.asp"><img src="images/imgBoxFloral.jpg" border="0" style="margin-top: 3px;" /></a>
				</div><!-- catBot -->
				<div id="catBox">
					<a href="linenHome.asp"><img src="images/imgBoxLinen.jpg" border="0" style="margin-top: 3px;" /></a>
				</div><!-- catBot -->
				<div id="catBox" style="margin-right: 0px;">
					<a href="lightingHome.asp"><img src="images/imgBoxLight.jpg" border="0" style="margin-top: 3px;" /></a>
				</div><!-- catBot -->
			</div><!-- catmain -->
		</div><!-- contentWrap -->
		<div id="footerBKG"></div><!-- footerBKG -->
		<div id="footerWrap">
			<div id="footer">
				<div id="footerLeft">
					<a href="index.asp"><img src="images/logoFooter.png" border="0" /></a>
				</div><!-- footerLeft -->
				<div id="footerRight">
					<a href="index.asp">Home</a>
					<a href="services.asp">Services</a>
					<a href="gallery.asp">Photos</a>
					<a href="about.asp">Team</a>
					<a href="press.asp">Press</a>
					<a href="siscompanies.html">Sister Companies</a>
					<a href="tv.html">TV Show</a>
					<a href="http://ebrgroup.wordpress.com/" target="blank">Blog</a>
					<a href="contact.asp">Contact</a>
					<a href="https://www.facebook.com/pages/Events-by-Reese/162677523759035" target="_blank"><img src="images/iconfacebook.png" width="35" style="vertical-align:bottom; border: none; margin: 0;"></a>
					<a href="http://ebrgroup.wordpress.com/" target="_blank"><img src="images/iconblog.png" width="35" style="vertical-align:bottom; border: none; margin: 0;"></a>
					<p>
						(210) 340-4088&nbsp;&nbsp;402 West Rhapsody,&nbsp;&nbsp;San Antonio, Texas 78216&nbsp;&nbsp;&nbsp;<a href="https://maps.google.com/maps?q=events+by+reese&hl=en&oe=utf-8&client=firefox-a&hq=events+by+reese&hnear=San+Antonio,+Texas&t=m&cid=13306160548728164821&z=11&iwloc=A" target="_blank" style="font-size: 30px; font-family: LinotypeUnivers-410Cm;">map</a>&nbsp;<a href="mailto:info@eventsbyreese.com" style="font-size: 30px; font-family: LinotypeUnivers-410Cm;">email us</a>
					</p>
					<h3 style="color: #fff; letter-spacing: .2ex; margin-top: -18px; text-transform: uppercase; text-align: left; font-size: 14px; font-family: LinotypeUnivers-410Cm;">
						© Copyright Evenets By Reese Group.  All Rights Reserved.
					</h3>	
				</div><!-- footerRight -->
			</div><!-- footer -->
		</div><!-- footerWrap -->
	</body>
</html>

Open in new window

No additional HTML, HEAD and body tags inside of another body. H3 tag closing was missing, script and CSS links have been moved to the head, onload event moved to jQuery existing document.ready function ...

Please double check and use W3C validator for propper HTML structure.

HTH
Rainer

Author Comment

by:meldraper

ID: 397164792013-12-13

The first umpteen errors are within the javascript. It works perfectly in Chrome, FF, Opera, and even in IE 11 but not in any other previous versions of IE.

LVL 43

Expert Comment

by:Chris Stanyon

ID: 397164992013-12-13

Every now and then I get a stark reminder as to why I ditched DreamWeaver!!

The guys are right - your HTML is all over the place so even if your JS is bang on, it'll probably still not work across all browsers - Chrome and Firefox can often 'guess' what you're trying to do, but IE will throw a proper tantrum if things aren't right.

Having said that - here's a few things to consider - you're including the jQuery library, so this stuff is just so much easier using that. The HTML for your 'menu' is all messed up. The only valid child of a UL is an LI - not an A. Also IDs in an HTML document have to be unique - you've got loads of elements with an ID of colleftp. You should switch those to classes.

Here's an example of how your HTML should look. You'll notice I've included a data attribute to each LI - that's so we know which image we need to use:

<ul class="colleftp">
   <li data-image="images/services/1.jpg">Invitation design and management</li>
   <li data-image="images/services/2.jpg">Guest accommodation planner</li>
   <li data-image="images/services/3.jpg">Venue research and management</li>
   <li data-image="images/services/4.jpg">Food and beverage management</li>
</ul>

Open in new window

Your jQuery for the hover, would then look like this:

$('ul.colleftp li').hover(
   function() { $('#colright img').attr('src' $(this).data('image')) },
   function() { $('#colright img').attr('src' 'images/services/0.jpg') }
);

Open in new window

Add this to your CSS and you'll be good to go.

ul.colleftp li { cursor:pointer; }

Open in new window

LVL 44

Expert Comment

by:Rainer Jeschor

ID: 397165012013-12-13

Hi,
NO NO NO. It is not an error (only) in Javascript - it is definitely an error in the HTML dom structure! And that there are afterwards errors happening inside Javascript - thats just a consequence of the wrong HTML DOM.

1. You cannot have multiple HTML tags.
2. Opened tags have to be closed (e.g. H3 in the footer area)
3. Closed tags have to be opened (there is one closed P somewhere in the middle)

If you see that it is working in some browser - feel lucky/happy - with the next minor update it can break.

Have a valid HTML DOM structure and it should work in all major browsers.

Author Comment

by:meldraper

ID: 397165232013-12-13

Thank you. I fixed the html code, followed your suggestions, made the corrections, the mouseover image swap still won't work in previous version of IE. SO I really don't know what to do at this point.

LVL 43

Expert Comment

by:Chris Stanyon

ID: 397165352013-12-13

Try implementing my solution - it will work across all browsers and instead of having 20 lines of Javascript junk plus inline onmouseover events, you'll have no inline JS, 4 neat lines of jQuery, valid HTML and nice slick code :)

Surely it's a no brainer!

Author Comment

by:meldraper

ID: 397165942013-12-13

Thanks, Chris. I will. I inherited this page and @$$umed it worked since it worked in IE 11, it was brought to my attention it did not work in previous version of IE. I'm a programmer, not a designer, but I had to build dynamic data into the page. I will give your solution a try and let you know soon. Thanks again.

Author Comment

by:meldraper

ID: 397165982013-12-13

question Chris. How do i add that jquery code? Where does it go?

LVL 43

Expert Comment

by:Chris Stanyon

ID: 397166042013-12-13

Never assume something will work - particularly if you inherited it. I've inherited plenty of sites from other 'developers' only to discover a nightmare under the bonnet :)

If you get problems with my solution, come back to me, and we'll sort it out. It really is the way to go.

DreamWeaver creates ugly bloated code, particularly the Javascript functions. Bin them and start using jQuery and I promise you - you'll never look back...

LVL 43

Expert Comment

by:Chris Stanyon

ID: 397166072013-12-13

How do i add that jquery code? Where does it go?

In the head of your document, you already have a document ready block, so you just add it in there:

<script type="text/javascript">
$(document).ready(function(){
	$('#layerslider').layerSlider({
		skinsPath : '/slider/layerslider/skins/',
		skin : 'minimal',
		thumbnailNavigation : 'hover',
		hoverPrevNext : false,
		autoPlayVideos : false
	});

	$('ul.colleftp li').hover(
		function() { $('#colright img').attr('src' $(this).data('image')) },
		function() { $('#colright img').attr('src' 'images/services/0.jpg') }
	);
});		
</script>

Open in new window

Author Comment

by:meldraper

ID: 397166162013-12-13

Getting an error on this line:

function() { $('#colright img').attr('src' $(this).data('image')) },

LVL 43

Expert Comment

by:Chris Stanyon

ID: 397166242013-12-13

What error??

Looking at your page, you've changed the HTML but not added the jQuery to it.

LVL 82

Expert Comment

by:leakim971

ID: 397166272013-12-13

From your original code, replace :

function MM_findObj(n, d) { //v4.01
				var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
					d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
				if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
				for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
				if(!x && d.getElementById) x=d.getElementById(n); return x;
			}

Open in new window

by :

function MM_findObj(n, d) {
   return d.getElementById(n);
}

Open in new window

Author Comment

by:meldraper

ID: 397166462013-12-13

I made those changes, I still get the error but it doesn't tell me what it is. Tells me it's on this line:

function() { $('#colright img').attr('src' $(this).data('image')) },

I am feeling much more optimistic though. :)

		<script type="text/javascript">
			$(document).ready(function(){
				$('#layerslider').layerSlider({
					skinsPath : '/slider/layerslider/skins/',
					skin : 'minimal',
					thumbnailNavigation : 'hover',
					hoverPrevNext : false,
					autoPlayVideos : false
				});

	$('ul.colleftp li').hover(
		function() { $('#colright img').attr('src' $(this).data('image')) },
		function() { $('#colright img').attr('src' 'images/services/0.jpg') }
	);
});						
		</script>

Open in new window

LVL 43

Accepted Solution

by:Chris Stanyon

Chris Stanyon earned 2000 total points

ID: 397166482013-12-13

Ahh, Sorry. I made a typo - I missed out the commas after the 'src'. It should look like this:

$('ul.colleftp li').hover(
	function() { $('#colright img').attr('src', $(this).data('image')) },
	function() { $('#colright img').attr('src', 'images/services/0.jpg') }
);

Open in new window

Author Closing Comment

by:meldraper

ID: 397166552013-12-13

YOU are an absolute genius Chris. I am thrilled. Thank you so much for your help. It's working perfectly, all i have to do is fix the fonts and i'm good to go. Many thanks again.

LVL 43

Expert Comment

by:Chris Stanyon

ID: 397166592013-12-13

Nice one :)

Maybe another jQuery convert ??

Your styling should be fairly straight forward to fix - the reason you lost it is because you changed from an ID to a Class, so in your CSS instead of this:

#colleftp

you'll need this:

.colleftp

Good luck with it..

Featured Post

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Comparison of JS Frameworks: Angular.js vs React.js vs Ember.js

Article by: Serhiy

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.

AJAX form submission with customized server field validation

Article by: Julian

This article discusses how to implement server side field validation and display customized error messages to the client.

Introduction to jQuery (Part 1)

Video by: Jason

The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

Introduction to jQuery (Part 2)

Video by: Jason

The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…