Anyone good at JavaScript

Jamie1994

Jamie1994

Jamie1994

Associate
Joined
17 Nov 2008
Posts
101
Hi guys,

I'm currently trying to convert this

Code: 
function mouseoverhome()
{
document.home.src ="home2.png"; //changes the image source atrribute of 'home'
}


function mouseouthome()
{
document.home.src ="home1.png";
}


function mouseovercontactus()
{
document.contactus.src ="contactus2.png";
}


function mouseoutcontactus()
{
document.contactus.src ="contactus1.png";
}

etc for each button

Into something more like this


Code: 
function rollover(name, over)

var over;
var overorout;
var name;
var imgsrc 
{
	switch(over)
	{
	case 1:
		overorout = "2"
		break
	case 0: 
		overorout = "1"
		break
	}
	
	imgsrc = 'document.' + name + '.src = "' + name + overorout + '.png"';
}

I didn't think this through much before I got into it, but hopefully you can see what I'm trying to do.

Instead of each button having 2 of its own functions for rolled over/rolled off, I'm trying to use the same function with every button using parameters.

I have been able to get the full command that I need to change the image displayed on a button when a user rolls over, but it's stored in a variable as a string. Is there anyway I can use this?

If this makes no sense whatsoever let me know and I'll try to make it more clear.
 
Would it not be far easier to do this with CSS and image sprites?

Code: 
<ul id="mainNav">
	<li class="homeNav"><a href="#">Home</a></li>
  <li class="contactNav"><a href="#">Contact Us</a></li>
</ul>
Code: 
ul#mainNav li a { text-indent: -9999px; overflow: hidden; display: block; height: 100px;}

ul#mainNav li.homeNav a { background: url('home.png') no-repeat; width: 95px;}
ul#mainNav li.contactNav a { background: url('contact.png') no-repeat; width: 125px;}

ul#mainNav li a:hover { background-position: bottom left;}
 
If you're dead set on using js and images though, you could do it with jQuery with something like the following...

Code: 
$('img').hover(
  
  var imgID = $(this).attr('id');
  var imgOut = imgID + '1.png';
  var imgOver = imgID + '2.png';

  function () {
    $(this).attr('src', imgOver);
  }, 

  function () {
    $(this).attr('src', imgOut);
  }
  
);

This assumes that the first part of the image name matches the id.
<img src="contactUs1.png" id="contactUs" />
 
Last edited:
Thank you for your help Tripnologist.

This JavaScript stuff I'm doing is for college and the bit im working on right now actually has nothing to do with my assignment at all it's just me being curious. I'm going to get round to learning about jQuery soon, I feel so bad about learning random things that currently I don't have any lessons on when I have **** like HCI assignments to be doing
:(.

That CSS Sprite thing looks very interesting and I'm definitely going to revisit it.

To anyone who thinks they have the same problem as me, check out Crowze's post and remember if you are using 2 sets of quotes on the same line, alternate "s and 's.

Code doing what I want it to
Code: 
function rollover(name, over)
{

	imgsrc = 'document.' + name + '.src = "' + name + over + '.png"';
	eval(imgsrc);
}
 
Last edited:
Nooooo don't use eval, it's pure evil. You can easily do it by using the document like an array, as follows:
Code: 
function rollover(name, over)
{
	document[name].src = name + over + '.png';
}
 
Crowze said:
Nooooo don't use eval, it's pure evil. You can easily do it by using the document like an array, as follows:
Code: 
function rollover(name, over)
{
	document[name].src = name + over + '.png';
}
Click to expand...

Ok then I will, just for my curiosity could you tell me why eval is evil :P
 
Jamie1994 said:
That CSS Sprite thing looks very interesting and I'm definitely going to revisit it.
Click to expand...

If you were to fire me off (email is in trust) a url that I could take a quick look at, I'd be happy to whip up the images, css and html you'd need to convert to sprites from whatever you have currently. I guarantee that if you were to see it done in regards to what you have now, it would make near instant sense.

It's a far far better way of doing it as it's quicker, requires less effort and works for everyone. Nobody uses js for image mouseovers these days, except in special circumstances.
 
You must log in or register to reply here.
Back
Top Bottom