[SOLVED] The easiest function ever (need help...)

[mendoz]

Hey Java freaks.

 

This is my first ever JS function...

 

<script type="text/javascript">
function papito(obj) {
	document[obj].src="images/"+obj+"_on.jpg"
}
function papiton(obj) {
	document[obj].src="images/"+obj+".jpg"
}
</script>

 

When I hover over an image this function is called like this:

 

<img name="logo2" onmouseout="papiton('logo2')" onmouseover="papito('logo2')" src="images/logo2.jpg" />

 

Notice that I need to set a name to the image...

 

This has to be easier to do, right?

 

let's see what you got!

[fenway]

The "name" attribute doesn't make it into the document collection... only the id attribute does, and even so, that's IE-only.  Best way is to use the "this" object and set its src.

[mendoz]

By doing what exactly?

 

I'm a noobbbbb

[nogray]

you can use document.getElementById('ID_HERE') to get the object in any browser

<script type="text/javascript">
function papito(obj) {
	document.getElementById(obj).src="images/"+obj+"_on.jpg"
}
function papiton(obj) {
	document.getElementById(obj).src="images/"+obj+".jpg"
}
</script>

<img name="logo2" id="logo2" onmouseout="papiton('logo2')" onmouseover="papito('logo2')" src="images/logo2.jpg" />

[mendoz]

I just want to short this thing...

 

<img name="logo2" id="logo2" onmouseout="papiton('logo2')" onmouseover="papito('logo2')" src="images/logo2.jpg" />

 

I think by using "this"

[fenway]

Just use the following, it's cleaner:

 

function swap( e, obj, name ) {
if( e.type == 'mouseover' ) name += '_on';   
obj.src = 'images/' + name + '.jpg';
}

 

And then your HTML code would look like:

 

<img onmouseout="swap(event, this, 'logo2')" onmouseover="papito(event, this, 'logo2')" src="images/logo2.jpg" />

[mendoz]

Oh yeah ! thanks!