trouble with mouseovers document.?

@iriedodgeFeb 02.2003

I am having a bit of trouble the following “standard code” for a mouse over this works fine:

~~[QUOTE]~~

function activate () {
document.images[“menu1”] .src = “/images/menu_01-over.gif”;
document.images[“box”] .src = “/images/menu_02-menu_01_over.gif”;
}
function deactivate () {
document.images [“menu1”] .src = “/images/menu_01.gif”;
document.images [“box”] .src = “/images/menu_02.gif”;
}

[/QUOTE]

What I want to do is change the deactivate which goes with my onMouseOut “deactivate()” to change “box” to display a flash file instead of a gif. the code below does NOT work

~~[QUOTE]~~

[/QUOTE]

I assume this can be done and I need to change somthing in this line:

document.images [“box”] .src = “/images/slideshow.swf”;

to make it work, but I don’t have a clue as to what, I will be very grateful for any tips. Thanx _dustin

to post a comment

JavaScript

19 Comments(s) _↴

@RibeyedFeb 02.2003 — #hi,

don't know how to solve this one but the following code is working code from one of my own pages that has a flash file in it.

<object classid="clsid?27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="138" height="74" name="Discovery Computing Animated Logo">

<param name=movie value="/images/Discovery%20Computing.swf">

<param name=quality value=high>

<embed src="/images/Discovery%20Computing.swf" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="138" height="74" name="Discovery Computing Animated Logo">

</embed>

</object>

As you can see a lot more code than just:

******** .src = "/images/slideshow.swf";

Hope this helps

@khalidali63Feb 02.2003 — #
function deactivate () {

document.images ["menu1"] .src = "/images/menu_01.gif";

document.images ["box"] .src = "/images/slideshow.swf";

}
[/QUOTE]

You can not do what you want the way you are doing.

what you are doing above is trying to embed a flash movie in an img tag.

This what you would need to do.

either create another div or span tag and give it an id

then access this id using the following syntax.

<i>
 </i>document.getElementById("elId").innerHTML = 
 "&lt;EMBED src="Movie2.swf" quality=high bgcolor=#FFFFFF  WIDTH=550 HEIGHT=300"+
 " TYPE='application/x-shockwave-flash'&gt; &lt;/EMBED&gt;";

thats one aproach, the other would be that you put your images in a dive tag and from the img tag get the parent element and do the same as above.

cheers

Khalid

@iriedodgeauthorFeb 02.2003 — #thanks that was just what I was looking for.

Does anyoneknow of a good resource on the web the outlines the different parent child relationships within html / javacript, is this dot syntax concidered html or javascript, or do they overlap. I'm new to the concept in html documents.

peace

-dg

@iriedodgeauthorFeb 02.2003 — #here is what i have I feel I am getting close just missing some naming conventions:

function activate () {

document.images["menu1"] .src = "images/menu_01-over.gif";

document.images["box"] .src = "images/menu_02-menu_01_over.gif";

}

function deactivate () {

document.images ["menu1"] .src = "images/menu_01.gif";

document.getElementById("flashid").innerHTML =

"<EMBED src="slideshow.swf" quality=high bgcolor=#FFFFFF WIDTH=240 HEIGHT=323"+

" TYPE='application/x-shockwave-flash'> </EMBED>";

}[/QUOTE]

in the body i have

<div name="flashname" id="flashid"><img src="images/menu_02.gif" name="box" width="240" height="323" border="0" id="box"></div>[/QUOTE]

and this:

<a href="/hair.html" onMouseOver="activate()" onMouseOut="deactivate()"><img src="/images/menu_01.gif" name="menu1">[/QUOTE]

The results produces no mouseovers at all, with the second document. in the deactivate () function as it is above... Please help I have been struggling with this for almost 36 hours straight and $40 in books from Boarders.

@iriedodgeauthorFeb 02.2003 — #OK.... Reward offered, $10 USD Paypal only, to the first person who can solve my problem, email if you need clarification this offer stands, until I figure it out on my own, or someome steps up and shows me how to make this work.

The concept is I have a few mouseovers, starting with one, and when moused over it changes the image you are mousing over, and another image on the page as well, pretty simple, this I have working.

On mouse out it returns the moused over image to it's previous image and needs to change the other image to a flash file, I imagine using a container of sorts around the image to replace is with flash <div> is the best solution, but I can not seem to get it right.

Good luck and may the best programmer win, and be faster than I, so far it should not be hard to beat me as I have experienced about 36 hours of testing failure in the las 2 days.

@iriedodgeauthorFeb 02.2003 — #<object classid="clsid?27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" name="flash" width="240" height="323" id="flash" title="slideshow_title">

<param name="movie" value="/flash/slideshow.swf" />

<param name="quality" value="high" />

<embed src="/flash/slideshow.swf" width="240" height="323" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="flash"></embed></object>[/QUOTE]

@iriedodgeauthorFeb 03.2003 — #That was along the lines of what I thought. I've looked all day for detailed instructions on how to use DOM, and more-so which objects sre "built in" and which are not. The book I picked up explained the concept, and had a couple examples, but none fully explianed how to differenciate between what is what and where on the hiearchy.

One interesting snippet I found would display objects from a page, but it did not go all the way down the tree, it would stop at the first dot. I'll post it below if anyone is interested, if it was modified to go all the way down to chart from the parent to the last node it could be very useful, and poss. solve my problem with moseovers. here it is if anyone is interested.

this one starts at document:

<script language="javascript">

for (prop in document) {

document.write("document." + prop + " = " + document[prop] + "<br>");

}

</script>[/QUOTE]

@iriedodgeauthorFeb 03.2003 — #That seems like a pretty handy tool. Once I get a little more advanced with my JavaScript I'd like to make on that made a tree for the while documrnt.

I'm still prety gray on the whole topic, if you have the time, or deisre how could I use this type of script to figure out what and where on the tree my flash file would be called, so I can call it for my on mouseout event?

If you are busy etc. I understand you have affered me some enlightenment here I have not been able to find elswhere.

Dustin

@Zach_ElfersFeb 03.2003 — #Here:

function activate () {

document.images["menu1"] .src = "images/menu_01-over.gif";

document.images["box"] .src = "images/menu_02-menu_01_over.gif";

}

function deactivate () {

document.images ["menu1"] .src = "images/menu_01.gif";

document.getElementById("flashid").innerHTML =

"<EMBED src="slideshow.swf" quality=high bgcolor=#FFFFFF WIDTH=240 HEIGHT=323"+

" TYPE='application/x-shockwave-flash'> </EMBED>";

}

You had "<embed src="slideshow.swf"...". You can not have double quotes within double quotes in JavaScript. It will mess up the code. Prefix the quotes with a backslash ().

@iriedodgeauthorFeb 03.2003 — #how did you choose "flashid" as the id, it that what I should use? I can't test this right now but if this does work you will be concidered the winner. -thanks dustin

If anyone else feels like this is not the correct answer please post, as the first working solution wind the 15 smackers. Thanks -dustin

@Zach_ElfersFeb 03.2003 — #It doesn't matter what the id is. You can make it whatever you want.

@iriedodgeauthorFeb 03.2003 — #I am attaching the file, see the comments to get a clearer picture of what I am trying to do , and why I am asking about the ID thing. -thanx again again

[upl-file uuid=eabe6187-71c0-4aac-8eaf-6c8b5433a877 size=6kB]index.txt[/upl-file]

@Zach_ElfersFeb 03.2003 — #Is this what you want?

[upl-file uuid=e1d5d66d-f7bd-4fb4-b102-dceba56f74b2 size=6kB]index.txt[/upl-file]

@iriedodgeauthorFeb 03.2003 — #http://beautyandthebeast.net/index2k3_ver4.html

is where you can see the current version I have installed for testing.

@iriedodgeauthorFeb 03.2003 — #as you can see by the demo it links and chages to the swf, althougth the swf is not playing, huge step in the right direction. I can't debug much as I am at work and should be doing other things, thanks

@iriedodgeauthorFeb 04.2003 — #It worked, I had to point the url to a different location, but it it did work...

My next unfore-seen problem is now when the OnmouseOut has occured and the new flash image is playing, and you moseover the object again, I get a script error saying that document.images.box does not exist, and it does not because the onMouseover replaced that entire section with the flash object.

Any suggestions?

you can see the functionalilty on the fore posted url

zach if you want to email me you paypal email address I can send you the reward, any tips on solving this problem would be great.

I imagine nesting the current <div > we replace in another and change the flash to change the inner one, so the on mouse effects the outer <div> superceeding the innfer one that may have changed. I am horrable at this so any help here is also appreciated but not required the question was answered and the reward shall be paid -thanks.

@iriedodgeauthorFeb 04.2003 — #document.getElementById("outer1").innerHTML =

"<img src="/images/menu_02.gif" name="box" width="240" height="323" border="0" id="box"/>;[/QUOTE]

I know I'm a looser, can someome fix my formatting of the above, I think this will be one of the last hurdles.....

@Zach_ElfersFeb 05.2003 — #Here:

document.getElementById("outer1").innerHTML =

"<img src="/images/menu_02.gif" name="box" width="240" height="323" border="0" id="box"/>";

P.S. You should pay Khadali. I didn't do much but point out a few errors. Khadali is the one who came up with the whole idea.

@iriedodgeauthorFeb 05.2003 — #khalidali63

it looks like you have been appointend as the winner here. I feel I should pay someone. Zach says it should be you. So if you can send me your paypal email, I shoot your over a little dough.

As far as my projects goes... I can't figure out how to have it create, ar retain a placeholder "document.images.whatever" so whe I mouse back over the image while it is playing the flash file it will show the original mouseoever again.

Unless anyone has any ideas, I am at my whits end, and I am going to just fore-go all javascript and to the entire thing im flash, I would like to make it work, so any sugg. are appreciated... Thanks for everyone's help

-dustin

Also in #JavaScript _↴

How do I change the contents of a <div> with a click(link)?Math equation, pls help.Validation for domain name & IPAddress

Success!

Help @iriedodge spread the word by sharing this article on Twitter...

Tweet This

trouble with mouseovers document.?

19 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

19 Comments(s) _↴

Also in #JavaScript _↴