Preserved Topic: javascript: onMouseOut (Page 1 of 1)

I have three images:

1. original image
2. mouse over image
3. mouse out image

has anyone seen a javascript that will display "image 3" instead of replacing "image 1" on mouse out?

seen a javascript?
time to start learning how to write your own!
ok, well, this would be easier to do if i knew exactly what your current JS code looks like, but ill just write one up that i think makes the most sense - all you need to do is name your images appropriately.

ok, heres the a href and img tags:
<a href=here.html onMouseOver="domouseover('this')" onMouseOut="domouseout('this')"><img src=this.gif name='this'></a>
and another:
<a href=there.html onMouseOver="domouseover('that')" onMouseOut="domouseout('that')"><img src=that.gif name='that'> </a>

and in your html head, have the following functions:

function domouseover(image) {
document.images[image].src= image + '_over.gif'
}

function domouseout(image) {
document.images[image].src= image + '_out.gif'
}

so, this means you have this.gif, this_over.gif, and this_out.gif, and the same for that.gif.
alternatively, you could put all this stuff in the ahref tag:

<a href=here.html onMouseOver="document.images['this'].src='this_over.gif'" onMouseOut="document.images['this'].src='this_out.gif'"><img src=this.gif name='this'> </a>

make sense?
if you want the JS explained in a different way, tell me. there are countless ways of making this script.
but basically, all you do that's different to normal mouseover scripts is replace the original image with a mouse out one.
so if you want to just mess with whatever code you have, then just ensure this:
1) your original image only needs to be written in inside the <img> tag.
2) wherever is does a mouseout function, change the original image source to the mouseout image.
3) good luck!

Uh, thanks! Gee I wish it was that easy to just up and create a javascript from scratch. I'm not scripting literate...on the other hand I could push pixels til I was blue in the face. My scripts are hacked from other peoples sites. I feel pretty proud to be able to tear apart someone else's script and make it work with my site in a different look or fashion. That's pretty much the extent of my scripting ability.... I've bought shitloads of books, but they are all over my head.... been to a JAVA basics class....played solitare the whole time...it was like the teacher was speaking Greek from the get go. I try to learn, honestly I do but I just can't get the hang of programming anything...

well, i hope what i wrote helps.
ps - you ARE giving credit to the source files that you've hacked from, right?
just answer yes, and keep everybody happy.

hopefully, when you lok at the javascript that i wrote, you can make sense of it.
for example, the
document.images[image].src="image_over.gif"
ok, well, this demonstrates the DOM, document object model.
and its simple (kinda), on the document there are many different images, which can be referred to by name, eg
document.images['button1']
and each image has its own properties, such as height, width, name.. and source!
and you can change its source!
so the image source now is "image_over.gif"
all you need to do is make sure there is some sort of event to trigger this action.... and the event we're using here is onmouseover!
make sense?
ps - you do know that JAVA is entirely different to JavaScript, right?

of course I credit those that created the scripts....That's only ethical....

yeah I learned that JAVA is completely different than javascript, in that class. That's about all I picked up!

I was sitting there for 6 weeks going... "Dammit, I took the wrong course!"

The following code is what Dreamweaver vomits forth when you tell it that you want to do the behaviour, "swap image". Code like this just blows me away. Why does it have to look so damn difficult?


<script language="JavaScript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v3.0
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>

it has to be universal.
its a simple as that.
when you customise code for each individual page, you can make it much neater, but when the code has to be created when you click "make mouseover effect", then it has to be a very complicated type of script.
but this part doesnt matter.
what does is what the onmouseout actions are, and how you can modify them....

I always wondered that about Dreamweaver code myself. As I try to learn to write my own scripts, I go to what Dreamweaver writes to try and get ideas of where to start. I have stopped doing that because I come away completely baffled every time, thinking that there's no way I'll ever learn to write this stuff. I'm glad to know all that code isn't needed on an individual page to page basis. Thanks bunchapixels!

Yea yea, I know.... I started out baffled.

Are there any good websites for learning javascript from scratch (for those with no prior knowledge of programming in any language)?

Try this one,
http://htmlgoodies.earthweb.com/primers/jsp/

It starts you out with some good basics in relatively plain language.

[This message has been edited by butcher (edited 27-12-2000).]

Thanks Butcher!

I went and made a .PDF of the 30 lessons. The file is 1.68mb. If anyone would like a copy of it, go here and grab it:

https://www.idrive.com/boudga/files/Shared/

if that link didn't work go here:

https://www.idrive.com/mydrive/home.html?boudga

in the visitors form field type in: boudga

that should take you to the shared .PDF

No prob, I'm just glad there was finally a question in this forum I could give a decent answer to.