Rollover image with link in javascript sidebar

Hi, my website uses a right hand side bar which is a .js file
i currently have static images and text in the side bar but i would like to add rollover images to a few of the images, the images also need to have hyperlinks.
i have tried to add mouseover commands from examples on the internet but i can't get it to work.
Please could you let me know the additional code to the snippet of code below to make this work.
regards
Rick

document.write('<fieldset><legend>');
document.write('Useful Links<br></legend>');
document.write('<a href="http://www."><img src="picts/image1.jpg" border="0" class="borders"></a><br>');
document.write('</fieldset>');
document.write('<br><br>');
   }
Rick_PenneyAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

mbochonCommented:
Hi Rick,

You can do it really easily this way :

<img src="picts/image1.jpg" onmouseover="this.src='picts/image1.jpg'" onmouseout="this.src='picts/image2.jpg'">

Open in new window


Then you could go further using advanced technics such as sprites (CSS image offset) or JavaScript libraries (jquery, etc.).

Regards.
Kiran SonawaneProject LeadCommented:
Try something like...
...
document.write('<a href="http://www."><img src="picts/image1.jpg" border="0" onmouseover="bigImg(this)" onmouseout="normalImg(this)" class="borders"></a><br>');
document.write('</fieldset>');
document.write('<br><br>');
   }

function bigImg(x)
{
x.style.height="64";
x.style.width="64";
}

function normalImg(x)
{
x.style.height="32";
x.style.width="32";
}
Rick_PenneyAuthor Commented:
Hi
i'm very grateful for your quick response, i still get syntax errors in Dreamweaver for that line. Sorry, regards, Rick


 if (paragraph_1 == "yes") {
document.write('<fieldset><legend>');
document.write('Useful Links<br></legend>');
document.write('<a href="#"><img src="picts/image1.jpg" onmouseover="this.src='picts/image1.jpg'" onmouseout="this.src='picts/image2.jpg'"></a><br>');
document.write('</fieldset>');
document.write('<br><br>');
   }
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

d4durveshCommented:
Since you using jQuery the code will be ,

<img src="your_first_img.jpg" alt="">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>

<script type="text/javascript">

	$('img').on('mouseenter',function() {
		$(this).attr('src','your_second_img.jpg')
	})

		$('img').on('mouseout',function() {
		$(this).attr('src','your_first_img.jpg')
	})

</script>

Open in new window

after this you can expand it as you like.
Atique AnsariCommented:
Replace below line

document.write('<a href="#"><img src="picts/image1.jpg" onmouseover="this.src='picts/image1.jpg'" onmouseout="this.src='picts/image2.jpg'"></a><br>');

with

document.write('<a href="#"><img src="picts/image1.jpg" onmouseover="this.src=\'picts/image1.jpg\'" onmouseout="this.src=\'picts/image2.jpg\'"></a><br>');

Let me know if you are still getting error..

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Rick_PenneyAuthor Commented:
Many thanks to all of you for your help,  i'm very grateful
regards, Rick
Atique AnsariCommented:
Welcome
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.