Solved

Rollover image with link in javascript sidebar

Posted on 2012-04-05
7
229 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
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
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
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…

830 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