Solved

Rollover image with link in javascript sidebar

Posted on 2012-04-05
7
228 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
NAS Cloud Backup Strategies

This article explains backup scenarios when using network storage. We review the so-called “3-2-1 strategy” and summarize the methods you can use to send NAS data to the cloud

 
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

Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
how to avoid redundand ajax calls 5 29
Performance for Office 365 6 48
Javascript tutorials with real examples 5 26
Jquery 2 12
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…
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…
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…

777 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