the js ventriloquist: hovers here- changes there

[a_design_interactive]

hi there. i'd like to try something. based on my understanding of the DOM, i know it can be done, but i've only begun to get the hang of javascript-- so i don't know what you'd call this-- i bet you've got a stock script which will do it...

trying to decide on which image i want for my masthead -- one is more "vibrant" in color-- i thought it would be cool, instead of having something happen to the text or < li > , i'd like to have that image switch from dull to vibrant.

i'm picturing a mouseover event on the < a > which will activate a function tied to the image-- but that's where i lose it. what would i want to do w/ the function? the syntax to point to the image? and then-- what kind of script would need to "surround" the image elements?

maybe i'm totally off, in which case-- if you've got a standard script, or just -- whatever you want to give me. i'm kinda curious if i'm on the right track though.

thanks!

EDIT: to clarify, i'm talking about doing the image switch instead of the text in a "navlist" changing, which is typical on mousover:hover type thing

[Twey]

<img id="masthead" src="masthead_dull.png">
<some_element
  onmouseover="
    document.images['masthead'].src = 'masthead_vibrant.png';
  "
  onmouseout="
    document.images['masthead'].src = 'masthead_dull.png';
  "
>

... where some_element is any element of your choosing.

[a_design_interactive]

hey, Twey-- thanks so much! you understood Exactly what i wanted. i know i don't have the best way of explaining / asking stuff-- so i do appreciate that you're able to weed through all that.

anyway-- so, i have to say-- i can't believe it's this "easy"!
is this what you would call "using the DOM"?, or is this a more basic javascript technique?

basically-- if i get this right-- all we're doing here with this:
document.images -- okay, so it's an image element within the document. easy enough, and the ['id-of-image'] is essentially the associative Key of the Array named "Images"? depending upon the placement in the doc., i understand i could also use for example images['2'], if it were the 3rd element, etc.?
and then: .src is talking about what attribute of the image array we're going to affect? is that the basic gist of it?

my question for that part would be-- is it always going to be "document - element - attribute" ? (as in document.image.src)? obviously javascript then is not using precisely the same as html names (i.e. image.src vs <img src /> ). any advice for this issue?

now, this was easy because it was all able to be done within the event handler itself, right? if i wanted to, i could put this in a .js file, or up at the top of the doc, and part of a <script>, yes?
and if i did it that way, would it be something like this?:

<script>
<!--
function(imgbryte) {
  document.image['idname'].src = 'brightimage';
}
function(imgdull) {
  document.image['idname'].src = 'dullimage';
}
-->
</script>

<!-- stuff -->

<a href="#" onmouseover="imgbryte()" onmouseout="imgdull()">somelink
</a>

basically something like that? i guess the point of my question being-- is there anything unique about placement within or outside of the "event handler", or will the syntax remain basically identical? (i realize i may have a few things wrong in there, which i can easily reference such as, i'm not certain of whether i'd need onmouseover="imgbryte" VS. onmouseover="imgbryte()"

assuming i'm doing "okay" w/ this stuff-- what might you suggest as a "next step" in terms of... maybe try to build some script, or have a look at something a little more complicated... such as ____ ?

thanks so much for your generous help!!


EDIT: i tried to make it easier for responding by putting "bold" around my "real" questions.

[Twey]

is this what you would call "using the DOM"?, or is this a more basic javascript technique?

Not really, no. The DOM is being used (simply by working with elements), but "using the DOM" usually refers to DOM-specific and -standard functions such as getElementsByTagName, .parentNode, &c.

document.images -- okay, so it's an image element within the document. easy enough, and the ['id-of-image'] is essentially the associative Key of the Array named "Images"? depending upon the placement in the doc., i understand i could also use for example images['2'], if it were the 3rd element, etc.?

[2], yes. No quotes: it's a number, not a string. document.images isn't technically an array; it's what we call a collection, which is basically an object that usually behaves like an array, but not always.

my question for that part would be-- is it always going to be "document - element - attribute" ? (as in document.image.src)? obviously javascript then is not using precisely the same as html names (i.e. image.src vs <img src /> ). any advice for this issue?

document.image is not defined. document.images is a special collection of all the images within the document. This does not hold true for all elements. If no collection is available (window.frames and document.links also exist), then a reference to an individual element can be obtained using document.getElementById("id_of_element"), or a collection similar to document.images can be obtained with document.getElementsByTagName("tag_name"). The attributes generally keep the same names in Javascript that they have in HTML, although there are a few cases where this is not so. In Javascript, however, they are case-sensitive.

now, this was easy because it was all able to be done within the event handler itself, right? if i wanted to, i could put this in a .js file, or up at the top of the doc, and part of a <script>, yes?

Yes.

and if i did it that way, would it be something like this?:

No, closer to:

<script type="text/javascript">
function imgbryte(id) {
  document.images[id].src = 'brightimage';
}

function imgdull(id) {
  document.image[id].src = 'dullimage';
}
</script>

<!-- stuff -->

<a href="someurl" onmouseover="imgbryte('idname');" onmouseout="imgdull('idname');">somelink
</a>

assuming i'm doing "okay" w/ this stuff-- what might you suggest as a "next step" in terms of... maybe try to build some script, or have a look at something a little more complicated... such as ____ ?

No idea. What do you want to do?

[mburt]

<script>
<!--
function(imgbryte) {
  document.image['idname'].src = 'brightimage';
}
function(imgdull) {
  document.image['idname'].src = 'dullimage';
}
-->
</script>

Should be:

<script>
<!--
function imgbryte() {
  document.image['idname'].src = 'brightimage';
}
function imgdull() {
  document.image['idname'].src = 'dullimage';
}
-->
</script>

[mburt]

Sorry, Twey. We cross-posted and your answer is in much more detail Ignore my post.

[a_design_interactive]

Readers:
i realize this is a really old thread, but searching the DD forum this night, it is my first realization that i never acknowledged these replies. and considering how rather spastic and multiple are my inquiries, i wish to extend now my long-overdue gratitude. Thank you, mburt and Twey! in retrospect, it's easy to see how well my curiousity was handled by you both.

To wax off-topic, I'd like to comment also upon how skilled and patient are most of the tutors here at DynamicDrive.com !! . in fact, i'm a little surprised that the forums here aren't literally overflowing with tens-of-thousands of helpless readers, like myself. but-- perhaps that's why i perceive it the way i do-- because it's a nice little, relatively tight-knit community. it's like the Goldilocks forum-- the participation is juusssst riiiggght!!
;-)

here's to wishing many more good years for DynamicDrive.com
three cheers for DD! "hip hip... hooray!... hip hip...hooray!..."

[Twey]

Haha, you're welcome. We love you too.

[jscheuer1]

three cheers for DD! "hip hip... hooray!... hip hip...hooray!..."

That's only two cheers.



Just glad you're happy!

[a_design_interactive]

That's only two cheers.

“well... you see, Brian...
perhaps that was my attempt to illicit an implied third cheer,” Stewie's voice raising in pitch as he speaks to Brian.
“... as if the reader might speak the third to him/herself-- the author going for a sort of sublininal affectation.”
“Ah Rupert!,” exclaims Stewie pedantically, “We'll let Brian figure this one out while we investigate whether the Fat One has finished with Lois, but ever so quietly. Surely soiled by Peter, her mammary will not yet be a fitting place for hoisting unto my deserving feast. The vile matriarch must be coaxed to proceed in a thorough cleansing!”


[hee hee. cheers, yo.]
;-)