Solved

Rollover image with link in javascript sidebar

Posted on 2012-04-05
7
232 Views
Last Modified: 2012-04-05
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>');
   }
0
Comment
Question by:Rick_Penney
[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
7 Comments
 

Assisted Solution

by:mbochon
mbochon earned 250 total points
ID: 37810632
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.
0
 
LVL 17

Expert Comment

by:sonawanekiran
ID: 37810642
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";
}
0
 

Author Comment

by:Rick_Penney
ID: 37810799
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>');
   }
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 10

Expert Comment

by:d4durvesh
ID: 37811014
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.
0
 
LVL 7

Accepted Solution

by:
Atique Ansari earned 250 total points
ID: 37811068
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..
0
 

Author Closing Comment

by:Rick_Penney
ID: 37811244
Many thanks to all of you for your help,  i'm very grateful
regards, Rick
0
 
LVL 7

Expert Comment

by:Atique Ansari
ID: 37811371
Welcome
0

Featured Post

MS Dynamics Made Instantly Simpler

Make Your Microsoft Dynamics Investment Count  & Drastically Decrease Training Time by Providing Intuitive Step-By-Step WalkThru Tutorials.

Question has a verified solution.

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

Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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)
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…
Suggested Courses

752 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