Solved

Rollover image with link in javascript sidebar

Posted on 2012-04-05
7
235 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
Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

 
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

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.

Question has a verified solution.

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

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-…
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 …
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

615 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