Rollover prob in XHTML when Flash inserted

socoolbrewster · September 12th, 2004, 12:59 PM

I am developing a Website for a Charity, and the entire site has been developed using XHTML Transitional. The site also has some basic JavaScript for creating rollover link buttons. The problem I have encountered is that since I have included XHTML friendly code to enable a Flash movie to be inserted - the rollover for each button appears in the wrong place. Can anyone advise me why this might so?

THE CODE ADDED IS:
==================

<object type="application/x-shockwave-flash" data="flash/logo-movie.swf" width="680" height="170">
<param name="movie" value="flash/logo-movie.swf" />
<img src="images/motion/main-logo.gif" width="680" height="170" alt="YHP logo" />

WEBSITE
=======

This is a preview link, demoing to how the site rollovers should work

http://www.mediamole.net/yhp

And here is the index page when the above code is inserted into it.

http://www.mediamole.net/yhp/test.html

I would welcome anyway ideas? Not sure how or why this problem should be encountered because of a flash file.

I would welcome any ideas

Gaz

Gaz

isNaN · September 14th, 2004, 11:57 AM

Your trouble is coming from the image[1] index of the array you took out image[0] which was(images/motion/main-logo.gif) so the first rollover would change to:
<a href="index.html" target="_self" onmouseover="document.images[0].src='images/linksgfx/btn_about_over.gif';" onmouseout="document.images[0].src='images/linksgfx/btn_about.gif';"><img src="images/linksgfx/btn_about.gif" width="120" height="28" alt="about us link" border="0" /></a>
the second would use (document.images[1]) and so on.

isNaN · September 14th, 2004, 12:07 PM

actually i just saw that it is still there try giving the links names and refering to them using the names ie include <a href="" name="link1" document.links[link1].src='images/linksgfx/btn_about_over.gif';" onmouseout="document.links[link1]...".src='images/linksgfx/btn_about.gif';"><img src="images/linksgfx/btn_about.gif"

Snib · September 14th, 2004, 12:53 PM

Here's a much easier solution:

Get rid of the <a> tags and use just images. Give them the cursor:hand CSS property, and the onClick property a JavaScript that causes the user to go to the next page. Then the onmouseover and onmouseout functions can just apply to self. It would also use considerably less code.

So, completely restructured, your menu code would look like this:

Code:

<img style='cursor:hand' src="images/linksgfx/btn_about.gif" onmouseover="this.src='images/linksgfx/btn_about_over.gif';" onmouseout="this.src='images/linksgfx/btn_about.gif';" onclick='window.location="index.html"' width="120" height="28" alt="about us link" border="0" />
<br />
<img style='cursor:hand' src="images/linksgfx/btn_issues.gif" onmouseover="this.src='images/linksgfx/btn_issues_over.gif';" onmouseout="this.src='images/linksgfx/btn_issues.gif';" onclick='window.location="issues.html"' width="120" height="25" alt="issues link" border="0" />
<br />
<img style='cursor:hand' src="images/linksgfx/btn_services.gif" onmouseover="this.src='images/linksgfx/btn_services_over.gif';" onmouseout="this.src='images/linksgfx/btn_services.gif';" onclick='window.location="services.html"' width="120" height="27" alt="services link" border="0" />
<br />
<img style='cursor:hand' src="images/linksgfx/btn_case.gif" onmouseover="this.src='images/linksgfx/btn_case_over.gif';" onmouseout="this.src='images/linksgfx/btn_case.gif';" onclick='window.location="case.html"' width="120" height="26" alt="case studies link" border="0" />
<br />
<img style='cursor:hand' src="images/linksgfx/btn_news.gif" onmouseover="this.src='images/linksgfx/btn_news_over.gif';" onmouseout="this.src='images/linksgfx/btn_news.gif';" onclick='window.location="news.html"' width="120" height="27" alt="news link" border="0" />
<br />
<img style='cursor:hand' src="images/linksgfx/btn_plan.gif" onmouseover="this.src='images/linksgfx/btn_plan_over.gif';" onmouseout="this.src='images/linksgfx/btn_plan.gif';" onclick='window.location="plan.html"' width="120" height="25" alt="business plan link" border="0" />
<br />
<img style='cursor:hand' src="images/linksgfx/btn_recruit.gif" onmouseover="this.src='images/linksgfx/btn_recruit_over.gif';" onmouseout="src.src='images/linksgfx/btn_recruit.gif';" onclick='window.location="recruit.html"' width="120" height="25" alt="recruitment link" border="0" />
<br />
<img style='cursor:hand' src="images/linksgfx/btn_contact.gif" onmouseout="this.src='images/linksgfx/btn_contact.gif';" onmouseover="this.src='images/linksgfx/btn_contact_over.gif';" onclick='window.location="contact.html"' width="120" height="27" alt="contact link" border="0" />

HTH,

-Snib <><
http://www.snibworks.com/

socoolbrewster · September 14th, 2004, 01:03 PM

Hi all

Thanks for responding to my problem - basically it was what you said. I had got my array index wrong. Basically the browser was counting the image I replaced with Flash as the array index[0] - Whereby as soon as that was replaced with Flash it thought the first image in the document was my first button !! lol

To resolve it I decided to name the images rather than use an array - thanks for your help

Gaz