Can Map target = onMouse events ?


Hi,

Is it possible to have a map target in an image that causes a mouesover/mouseout event so that onMouseover a button appears and on onMouseout it just disappears - something like this


<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="760" height="92"><img src="www.site/images/table-image.gif" width="760" height="92" border="0" usemap="#Map"></td>
  </tr>
</table>


<map name="Map">
  <area shape="rect" coords="6,32,90,46" href="#" target="whatever" onmouseover="this.src='www.site/button.png';" onmouseout="this.src='the image as it was" />
  <area shape="rect" coords="91,32,171,46" href="#" target="whatever" onmouseover="this.src='www.site/another-button.png';" onmouseout="this.src='the image as it was" />
</map>
LVL 4
macuser777Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Diablo84Commented:
hi macuser777,

I think you would have to do something like this:

<img src="theimage.jpg" width="760" height="92" border="0" id="mapimage" usemap="#Map">

(notice the id) then...

<map name="Map">
  <area shape="rect" coords="6,32,90,46" href="#" target="whatever" onmouseover="document.getElementById('mapimage').src='anotherimage.jpg';" onmouseout="document.getElementById('mapimage').src='theimage.jpg'" />
  <area shape="rect" coords="91,32,171,46" href="#" target="whatever" onmouseover="document.getElementById('mapimage').src='anotherimage.jpg';" onmouseout="document.getElementById('mapimage').src='theimage.jpg'" />
</map>

You might create a function to shorten the code, eg:

<script language="JavaScript">
function changeimg(img) {
 document.getElementById('mapimage').src= img;
}
</script>

then:

<map name="Map">
  <area shape="rect" coords="6,32,90,46" href="#" target="whatever" onmouseover="changeimg('anotherimage.jpg');" onmouseout="changeimg('image.jpg');" />
  <area shape="rect" coords="91,32,171,46" href="#" target="whatever" onmouseover="changeimg('anotherimage.jpg');" onmouseout="changeimg('image.jpg');" />
</map>

Diablo84

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
WoodyRoundUpCommented:
and additional, this will replace the whole image.
basically if you have two mouse over, you will need all together 3 images.
one for all mouseout, one each for the mouse over..

hope this helps a bit.
macuser777Author Commented:
mmm.. yeah - i'm a bit confused so far to be honest. But trying....
OWASP Proactive Controls

Learn the most important control and control categories that every architect and developer should include in their projects.

WoodyRoundUpCommented:
have a look at this: http://www.ljhooker.com/
it has got 4-5 different images button.
you can copy from the code, maybe....
just change the coordinate and filename
Diablo84Commented:
Lets not be so hasty to recommend taking someone else's code ;)

macuser777,

Basically, you need to add an id to the image so we can reference it with JS, ie. within the img tag, id="mapimage".

Then, in the area tags, where you had:

onmouseover="this.src='www.site/button.png';" onmouseout="this.src='the image as it was"

you would use:

onmouseover="document.getElementById('mapimage').src='www.site/button.png';" onmouseout="document.getElementById('mapimage').src='the image as it was'"

or with the shortened version previously mentioned with the JS function.

Diablo84
WoodyRoundUpCommented:
the code is mine. so, :p
of course you use it as a sample only. lol....
WoodyRoundUpCommented:
hi macuser777
did you get it working?
macuser777Author Commented:
:( nope - i'm considering a css solution maybe - i'm sure it al lworks but i'm just too backward to implement it....

Also - if i've understood it right - this will replace the entire image. Not ideal as the base image is quite large...

playmac   .com     /jscript.php

No actual code here just for you to see what i'm trying
macuser777Author Commented:
Hi,

I am trying a css solution - with which help would also be appreciated

http://oldlook.experts-exchange.com:8080/Web/Web_Languages/Q_21483652.html

Please advise me how to close up this q - whatever you think is fine by me. I'm sure it would have worked if I could've got my head round it.

Thanks

macuser
macuser777Author Commented:
Hi - the problem was solved with css
http://www.experts-exchange.com/Web/Web_Languages/Q_21483652.html

- please tell me how I ought to close this q. If you think it should be with an A accept that's cool - I just want to be sure that the answer would have worked so it's logged properly. Maybe try a demo and check???

macuser
WoodyRoundUpCommented:
I have responded my opinion on the post that you mentioned.
Diablo84Commented:
macuser,

Apologies for not replying sooner, have been caught up with problems behind the scenes.

The code i posted works fine (i always test before posting)... onmouseover the image is changed to the file name specified and onmouseout the image is changed back. As i understand, this did not fully cover your needs since the whole image is changed as opposed to just a part of it being changed.

As for closing this question, that is your call, if you had your problem solved in the other thread i am quite happy for you to request a refund in CS.

Best wishes,

Diablo84
macuser777Author Commented:
Thanks - if it worked then i'll accept :)
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.