onmouseover

[Jason]

<img src="../buttons/firecontact.png" width="120" height="25" alt="" border="0" onmouseover=img src="../buttons/firecontact_r2_c2_f2.jpg" width="99" height="21" alt="" border="0">

Could someone please tell me what is missing here?
I've got a button graphic and i want it to change when the mouse runs over the top of it.

Any help is always welcome thanks.:)

[dabbler]

I used a code like this:

<a href="Mypage.html" target="main" onmouseover="if (document.images) document.images.who.src='page2.gif'" onmouseout="if (document.images) document.images.who.src='page1.gif'"><img src="page1.gif" name="who" border="0" alt="My Page/></a>

[EnwTheGood]

Yeah, you can't just put an "img src=" into the onmouseover and onmouseout tags; you need javascript.

Dabbler's example works, and I think you could just do:

<img src="page1.gif" name="who" border="0" alt="My Page" onmouseover="if (document.images) document.images.who.src='page2.gif'" onmouseout="if (document.images) document.images.who.src='page1.gif'"/></a>

[Jason]

Thanks for your help but how would i put my 2 button files into these scripts?

[BoR|S]

Just have those files in the path you wrote in the HTML file... (In this spesific example, in the same directory where you have this page)

[Jason]

I'm very new to this but willing to learn.
I'm getting more confused everytime somegives me an answer.
Need Lamens terms please.:)

[dabbler]

As long as the image files are in the same directory as your page, they will be used by the script. That's all there is to it, the call to your image files will load the image.

[Delicates]

I always found use of JavaScript for mouseover images ugly.


#moo {
height: blah;
width: blah;
background: url("blah.png")
}
#moo:hover {
background: url("blah-over.png")
}


<div id="moo"></div>

That's the way I do it. Simple and elegant.
:)

[Jason]

Dabbler.

I've put your script in and get the message:-

'document.image.who' is null or not an object.

This error message comes on the screen after i go over the text :-

<img src="page1.gif" name="who" border="0" alt="My Page/>

which is printed on the document from the script.

Help please?

[BoR|S]

Try w/o the .who or use Delicates' suggestion...

One or another, I'll post a fully working code tommorow (I just need to find that backup cd I have it on :rolleyes: )

[Jason]

My 2 graphics are called "tiling1.gif" and "tiling2.gif".

Please could you place them in the script for me as I don't even know how to use delicates suggestion.

Thanks for all your help.:thumbup:

[Sky]

Ya... need explain....

[Delicates]

Originally posted by Jason
...I don't even know how to use delicates suggestion.


Learn CSS (http://www.w3.org/TR/CSS21/).

[Waves]

Is there a way to do this using DHTML. I kinda like that language...for some reason it seems better than javascript.

[Delicates]

Originally posted by Waves
Is there a way to do this using DHTML. I kinda like that language...for some reason it seems better than javascript.

DHTML is a concept, not a language.
:smack:

[Josh]

DHTML is "Dymatic HTML" ,not a language.
It contains javascript and vbscript.

[Sky]

Ok... could someone explain how that works?

[Delicates]

Originally posted by Sky
Ok... could someone explain how that works?

Dynamic HTML is a concept opposed to static HTML. In static HTML you just have a page and it stays unmodified and unchanged. With Dynamic HTML the page is not static, but changes depending on some factors which can be user input, time, and so on. There are 2 kinds of DHTML: server side and client side.
In server side DHTML the page changes prior to being sent to the client. This can be achieved through PHP, ASP(eww), JavaScript, Java servlets, ColdFusion, CGI and so on and so forth. In client side, the page changes after it's been sent to the client, on their computer. This is usually achieved through use of JavaScript or VBScript(eww).

I like to think of client side as:
DHTML = HTML + CSS + JavaScript + DOM

With that you can do almost anything.

[Waves]

Oh man. I really feel like a n00bie now. Everyone just get it all out now. I came here mostly to learn about new "concepts" and "languages" for webdesign. Give a guy a break.

[Sky]

Well, i sorta get php.. so dhtml is both? ..... hmm. and another question. in xml you define what your tags do right? xhtml is hyper-clean html, css defines points of html (and can work on it's own). righT?

[Jason]

I must change the subject here and get back to my original question.:D

How do i use onmouseover with my 2 graphics please?

Thanks for any help.

[HZR]

You can do something simple like:

<img src="normal.png"
onmouseover="this.src = 'over.png'"
onmouseout="this.src = 'normal.png'">

BTW, no need for line brakes. Inserted them because they shouldn't widen out the tables in the post.

[Jason]

My 2 graphics are called home1.gif and home2.gif.
Where would they be placed in that code?

[HZR]

<img src="home1.jpg"
onmouseover="this.src = 'home2.jpg'"
onmouseout="this.src = 'home1.jpg'">

...if the the "home2.jpg" is the rollover img.

[Josh]

<img id="picture1" src="blah1.jpg" width=39 length=30 onmouseover="picture()">
<script language=javascript>
function picture()
{
picture1.src="blah2.jpg";
}
</script>This must works,I've tested it.Check it!:cool:

[HZR]

The img will not flip back with that code though. If that's what you want Jason, just remove the onmouseout part from my code.

[Jason]

[QUOTE]Originally posted by HZR
[B]<img src="home1.jpg"
onmouseover="this.src = 'home2.jpg'"
onmouseout="this.src = 'home1.jpg'">



Used HZR's code and it works fine.

Thank you and anyone else who tried to help.:)

[Josh]

sorry I didn't know that HZR replyed

[DCElliott]

I liked delicate's suggestion although the code would not have worked. Using stylesheets is an extremely powerful way of doing Dynamic HTML and some really simple bits of code can create very powerful effects.

The code below will work, assuming home1 and 2 are in the directory this snippet is saved in. You must put in the height and width of this type of DIV element for it to work (see the "edit this" items in the code)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<STYLE>
<!--
#moo {/*The main image*/
background: url("home1.jpg'); width:edit this; height:edit this;
}
#moo2 {/*The replacement image*/
background:url("home2.jpg"); width:edit this; height:edit this;
} -->
</STYLE>
<title>Untitled</title>
</head>

<body>

<DIV id="moo" onmouseover="this.id='moo2'" onmouseout="this.id='moo'"> </DIV>


</body>
</html>


DE