Solved

onmouseover swapimage not working in IE

Posted on 2013-12-13
20
1 solution
592 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

0
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
  • 8
  • 7
  • 3
  • +1
20 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 39716345
validate your page here : http://validator.w3.org/
0
 

Author Comment

by:meldraper
ID: 39716365
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
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39716374
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.
0
Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

Free Trial
 
LVL 44

Expert Comment

by:Rainer Jeschor
ID: 39716439
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
0
 

Author Comment

by:meldraper
ID: 39716479
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.
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39716499
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

0
 
LVL 44

Expert Comment

by:Rainer Jeschor
ID: 39716501
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.
0
 

Author Comment

by:meldraper
ID: 39716523
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.
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39716535
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!
0
 

Author Comment

by:meldraper
ID: 39716594
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.
0
 

Author Comment

by:meldraper
ID: 39716598
question Chris.  How do i add that jquery code?  Where does it go?
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39716604
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...
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39716607
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

0
 

Author Comment

by:meldraper
ID: 39716616
Getting an error on this line:

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

Expert Comment

by:Chris Stanyon
ID: 39716624
What error??

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

Expert Comment

by:leakim971
ID: 39716627
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

0
 

Author Comment

by:meldraper
ID: 39716646
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

0
 
LVL 43

Accepted Solution

by:
Chris Stanyon earned 500 total points
ID: 39716648
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

0
 

Author Closing Comment

by:meldraper
ID: 39716655
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.
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39716659
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..
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Access It Now
Question has a verified solution.

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

Hex Maze
Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
Get Started with JavaScript
Article by: Experts Exchange
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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…
Advertise Here

688 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Advertise Here