I'm trying to make a submenu using reactive images. In order to do this, I need the map to change when the cursor passes over a certain element so that the new image displayed onmouseover can have reactive parts. I thought I kinda knew how to do it but since what I tryed doesn't work, I was wondering if anyone here could help me out. (but I have to keep using image mapping)
Here's my code
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/mapitamtam.gif" name="mapitamtamimg" usemap="#mapitamtamimg" border="0" alt="MapiTamTam">
<map name="mapitamtamimg">
<area shape="polygon" coords="100,138,124,140,144,150,156,165,158,176,157,187,147,200,133,210,114,214,100,214,82,212,68,206,64,205 ,61,211,59,215,57,208,59,199,54,191,50,184,49,172,55,158,68,147,79,142,91,139" href=http://www.webdeveloper.com/forum/archive/index.php/"bio.htm"
onmouseover="document.images['mapitamtamimg'].src='http://www.webdeveloper.com/forum/archive/index.php/images/bio.gif';document.getElementById('pop').stop();document.getElementById('pop').play();alt='Biographie ';"
onmouseout="document.images['mapitamtamimg'].src='http://www.webdeveloper.com/forum/archive/index.php/images/mapitamtam.gif';">
<area shape="polygon" coords="163,243,193,244,221,253,241,268,248,280,251,293,248,309,242,321,235,327,237,326,240,333,240,340,239, 349,236,341,226,335,216,339,201,345,180,348,155,347,136,341,119,333,108,322,101,310,99,292,102,277,1 17,260,134,251,156,243"
onmouseover="document.images['mapitamtamimg'].src='http://www.webdeveloper.com/forum/archive/index.php/images/expo.gif';document.getElementById('pop').stop();document.getElementById('pop').play();alt='Expositio ns';"
onmouseout="document.images['mapitamtamimg'].src='http://www.webdeveloper.com/forum/archive/index.php/images/mapitamtam.gif';">
<area shape="polygon" coords="342,308,367,311,391,324,399,340,398,355,384,372,366,381,341,383,325,382,309,375,306,373,302,378,298, 385,298,374,301,367,293,357,291,343,295,329,313,314,335,308" href=http://www.webdeveloper.com/forum/archive/index.php/"ecrits.htm"
onmouseover="document.images['mapitamtamimg'].src='http://www.webdeveloper.com/forum/archive/index.php/images/ecrits.gif';document.getElementById('pop').stop();document.getElementById('pop').play();alt='钂玶its' ;usemap='#expo';"
onmouseout="document.images['mapitamtamimg'].src='http://www.webdeveloper.com/forum/archive/index.php/images/mapitamtam.gif';">
<area shape="polygon" coords="489,248,516,247,542,250,559,258,577,272,585,286,586,299,584,314,577,323,573,331,576,336,577,342,575, 350,572,344,563,338,547,345,527,351,500,351,485,348,465,342,446,327,436,312,434,294,444,271,465,256, 484,248" href=http://www.webdeveloper.com/forum/archive/index.php/"acheter.htm"
onmouseover="document.images['mapitamtamimg'].src='http://www.webdeveloper.com/forum/archive/index.php/images/acheter.gif';document.getElementById('pop').stop();document.getElementById('pop').play();alt='Achete r';"
onmouseout="document.images['mapitamtamimg'].src='http://www.webdeveloper.com/forum/archive/index.php/images/mapitamtam.gif';">
<area shape="polygon" coords="585,138,609,139,630,146,640,154,649,169,649,180,646,189,635,202,618,211,597,213,582,213,570,210,558, 204,552,206,548,213,547,204,550,196,543,186,541,173,544,159,561,145,580,139,592,137" href=http://www.webdeveloper.com/forum/archive/index.php/"mailto:[email protected]"
onmouseover="document.images['mapitamtamimg'].src='http://www.webdeveloper.com/forum/archive/index.php/images/contact.gif';document.getElementById('pop').stop();document.getElementById('pop').play();alt='Contac t';"
onmouseout="document.images['mapitamtamimg'].src='http://www.webdeveloper.com/forum/archive/index.php/images/mapitamtam.gif';">
<area shape="default" nohref>
</map>
<map name="expo">
<area shape="polygon" coords="190,173,205,168,223,165,245,168,264,176,275,187,280,198,280,209,274,221,261,232,244,239,223,241,200, 237,182,228,173,218,168,204,170,192,180,179,190,173" href=http://www.webdeveloper.com/forum/archive/index.php/"expo1" alt="expo1">
<area shape="polygon" coords="327,207,348,208,372,217,386,228,391,243,390,254,380,269,362,278,340,283,318,281,303,277,289,268,281, 257,278,242,285,229,299,216,317,209,326,207" href=http://www.webdeveloper.com/forum/archive/index.php/"expo2" alt="expo2">
<area shape="polygon" coords="239,349,379,275,390,264,397,247,393,228,379,214,242,162,220,160,189,166,171,180,102,279,99,291,101,3 10,114,328,133,339,154,345,177,348,203,345,221,338,227,333,235,340,238,348" alt="expo" onmouseout="document.images['mapitamtamimg'].src='http://www.webdeveloper.com/forum/archive/index.php/images/mapitamtam.gif';usemap='#mapitamtamimg';">
<area shape="default" nohref>
</map>
Am I doing it wrong or is it that it can't be done?You might try image sprites: <!-- m --><a class="postlink" href="http://alistapart.com/articles/sprites/">http://alistapart.com/articles/sprites/</a><!-- m -->
These are basic link rollovers within an image accomplished by CSS positioning.
KDLAAllright, I'm not sure I understand the whole process after reading the article once (I'm still quite new to the business, still a student in fact but no, this isn't an assignment), but I'll give it a try, thanks for the link
. And I'm guessing what I first wanted to do is simply impossible? Or is it just way more complicated? (just curious to know).What you had was really complicated.
Even though the process recommended will be new to you, and require some time to learn, it will be more flexible for you to work with.
Just do some searching for CSS image sprites, or CSS image slicing, and you'll be sure to find lots of help -- beyond the helpful guys/gals in this forum!I've re-read it a couple of times, and even tho I don't fully understand it yet, I'm not sure it could solve my problem. The initial problem was to make new links available only when a first link has been activated, and so creating a sub-menu. Unlease I read it wrong, I don;t think that sprites whould allow me to do it either. The second issue it that image mapping allows me to define the margins of the reactive area perfectly (or almost) while sprites limit us to boxes. So unlease I got it wrong, I think I'll have to keep going with maps. Now I still don't know how to switch the used map but I've been thinking it might be done using javascript, am I right?
EDIT: I thought that a link to the said menu could be useful. It's in french but very easy to understand without needing to speak it. So when you pass the mouse over the second bubble from the left, two new ones appear. Now I want thoes to become available only while that image is being used and to make sure that the user can't accidently pass the mouse over the area and see links that aren't supposed to be there...
<!-- m --><a class="postlink" href="http://www.geocities.com/mapitamtam/Wow">http://www.geocities.com/mapitamtam/Wow</a><!-- m --> -- a visual is so helpful!
OK -- first problem:
what you need to do is to change the the javascript in the link, such as:
<area shape="polygon" coords="163,243,193,244,221,253,241,268,248,280,251,293,248,309,242,321,235,327,237,326,240,333,240,340,239, 349,236,341,226,335,216,339,201,345,180,348,155,347,136,341,119,333,108,322,101,310,99,292,102,277,1 17,260,134,251,156,243"
onclick="document.images['mapitamtamimg'].src='http://www.webdeveloper.com/forum/archive/index.php/images/expo.gif';document.getElementById('pop').stop();document.getElementById('pop').play();alt='Expositio ns';"
onclick="document.images['mapitamtamimg'].src='http://www.webdeveloper.com/forum/archive/index.php/images/mapitamtam.gif';">
But, using this method, you won't get the onmouseover effect, as seen with other images; that's where the CSS Sprite method makes things a little easier. The rollover effect is controlled by a a:hover CSS style, not by the javascript, so you don't have two portions of javascript competing against each other.
You could change your javascript, or create a certain script just for this link that controls the hover state and displays the submenu, all through assigning a class or ID to the link in question, but that still involves CSS, which I think you're trying to avoid.
Second issue -- the CSS sprites method is accomplished by splicing two images: what the things look like in a normal state, and what all the things look like when they are in the "mouseover" or hover state. (The background is included in the hover image slices.) Because these images contain the background, they can be spliced into squares. In essence, you're giving the appearance of being exact, when you aren't.
Hope this helps -
KDLA
Here's my code
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/mapitamtam.gif" name="mapitamtamimg" usemap="#mapitamtamimg" border="0" alt="MapiTamTam">
<map name="mapitamtamimg">
<area shape="polygon" coords="100,138,124,140,144,150,156,165,158,176,157,187,147,200,133,210,114,214,100,214,82,212,68,206,64,205 ,61,211,59,215,57,208,59,199,54,191,50,184,49,172,55,158,68,147,79,142,91,139" href=http://www.webdeveloper.com/forum/archive/index.php/"bio.htm"
onmouseover="document.images['mapitamtamimg'].src='http://www.webdeveloper.com/forum/archive/index.php/images/bio.gif';document.getElementById('pop').stop();document.getElementById('pop').play();alt='Biographie ';"
onmouseout="document.images['mapitamtamimg'].src='http://www.webdeveloper.com/forum/archive/index.php/images/mapitamtam.gif';">
<area shape="polygon" coords="163,243,193,244,221,253,241,268,248,280,251,293,248,309,242,321,235,327,237,326,240,333,240,340,239, 349,236,341,226,335,216,339,201,345,180,348,155,347,136,341,119,333,108,322,101,310,99,292,102,277,1 17,260,134,251,156,243"
onmouseover="document.images['mapitamtamimg'].src='http://www.webdeveloper.com/forum/archive/index.php/images/expo.gif';document.getElementById('pop').stop();document.getElementById('pop').play();alt='Expositio ns';"
onmouseout="document.images['mapitamtamimg'].src='http://www.webdeveloper.com/forum/archive/index.php/images/mapitamtam.gif';">
<area shape="polygon" coords="342,308,367,311,391,324,399,340,398,355,384,372,366,381,341,383,325,382,309,375,306,373,302,378,298, 385,298,374,301,367,293,357,291,343,295,329,313,314,335,308" href=http://www.webdeveloper.com/forum/archive/index.php/"ecrits.htm"
onmouseover="document.images['mapitamtamimg'].src='http://www.webdeveloper.com/forum/archive/index.php/images/ecrits.gif';document.getElementById('pop').stop();document.getElementById('pop').play();alt='钂玶its' ;usemap='#expo';"
onmouseout="document.images['mapitamtamimg'].src='http://www.webdeveloper.com/forum/archive/index.php/images/mapitamtam.gif';">
<area shape="polygon" coords="489,248,516,247,542,250,559,258,577,272,585,286,586,299,584,314,577,323,573,331,576,336,577,342,575, 350,572,344,563,338,547,345,527,351,500,351,485,348,465,342,446,327,436,312,434,294,444,271,465,256, 484,248" href=http://www.webdeveloper.com/forum/archive/index.php/"acheter.htm"
onmouseover="document.images['mapitamtamimg'].src='http://www.webdeveloper.com/forum/archive/index.php/images/acheter.gif';document.getElementById('pop').stop();document.getElementById('pop').play();alt='Achete r';"
onmouseout="document.images['mapitamtamimg'].src='http://www.webdeveloper.com/forum/archive/index.php/images/mapitamtam.gif';">
<area shape="polygon" coords="585,138,609,139,630,146,640,154,649,169,649,180,646,189,635,202,618,211,597,213,582,213,570,210,558, 204,552,206,548,213,547,204,550,196,543,186,541,173,544,159,561,145,580,139,592,137" href=http://www.webdeveloper.com/forum/archive/index.php/"mailto:[email protected]"
onmouseover="document.images['mapitamtamimg'].src='http://www.webdeveloper.com/forum/archive/index.php/images/contact.gif';document.getElementById('pop').stop();document.getElementById('pop').play();alt='Contac t';"
onmouseout="document.images['mapitamtamimg'].src='http://www.webdeveloper.com/forum/archive/index.php/images/mapitamtam.gif';">
<area shape="default" nohref>
</map>
<map name="expo">
<area shape="polygon" coords="190,173,205,168,223,165,245,168,264,176,275,187,280,198,280,209,274,221,261,232,244,239,223,241,200, 237,182,228,173,218,168,204,170,192,180,179,190,173" href=http://www.webdeveloper.com/forum/archive/index.php/"expo1" alt="expo1">
<area shape="polygon" coords="327,207,348,208,372,217,386,228,391,243,390,254,380,269,362,278,340,283,318,281,303,277,289,268,281, 257,278,242,285,229,299,216,317,209,326,207" href=http://www.webdeveloper.com/forum/archive/index.php/"expo2" alt="expo2">
<area shape="polygon" coords="239,349,379,275,390,264,397,247,393,228,379,214,242,162,220,160,189,166,171,180,102,279,99,291,101,3 10,114,328,133,339,154,345,177,348,203,345,221,338,227,333,235,340,238,348" alt="expo" onmouseout="document.images['mapitamtamimg'].src='http://www.webdeveloper.com/forum/archive/index.php/images/mapitamtam.gif';usemap='#mapitamtamimg';">
<area shape="default" nohref>
</map>
Am I doing it wrong or is it that it can't be done?You might try image sprites: <!-- m --><a class="postlink" href="http://alistapart.com/articles/sprites/">http://alistapart.com/articles/sprites/</a><!-- m -->
These are basic link rollovers within an image accomplished by CSS positioning.
KDLAAllright, I'm not sure I understand the whole process after reading the article once (I'm still quite new to the business, still a student in fact but no, this isn't an assignment), but I'll give it a try, thanks for the link
. And I'm guessing what I first wanted to do is simply impossible? Or is it just way more complicated? (just curious to know).What you had was really complicated.Even though the process recommended will be new to you, and require some time to learn, it will be more flexible for you to work with.
Just do some searching for CSS image sprites, or CSS image slicing, and you'll be sure to find lots of help -- beyond the helpful guys/gals in this forum!I've re-read it a couple of times, and even tho I don't fully understand it yet, I'm not sure it could solve my problem. The initial problem was to make new links available only when a first link has been activated, and so creating a sub-menu. Unlease I read it wrong, I don;t think that sprites whould allow me to do it either. The second issue it that image mapping allows me to define the margins of the reactive area perfectly (or almost) while sprites limit us to boxes. So unlease I got it wrong, I think I'll have to keep going with maps. Now I still don't know how to switch the used map but I've been thinking it might be done using javascript, am I right?
EDIT: I thought that a link to the said menu could be useful. It's in french but very easy to understand without needing to speak it. So when you pass the mouse over the second bubble from the left, two new ones appear. Now I want thoes to become available only while that image is being used and to make sure that the user can't accidently pass the mouse over the area and see links that aren't supposed to be there...
<!-- m --><a class="postlink" href="http://www.geocities.com/mapitamtam/Wow">http://www.geocities.com/mapitamtam/Wow</a><!-- m --> -- a visual is so helpful!
OK -- first problem:
what you need to do is to change the the javascript in the link, such as:
<area shape="polygon" coords="163,243,193,244,221,253,241,268,248,280,251,293,248,309,242,321,235,327,237,326,240,333,240,340,239, 349,236,341,226,335,216,339,201,345,180,348,155,347,136,341,119,333,108,322,101,310,99,292,102,277,1 17,260,134,251,156,243"
onclick="document.images['mapitamtamimg'].src='http://www.webdeveloper.com/forum/archive/index.php/images/expo.gif';document.getElementById('pop').stop();document.getElementById('pop').play();alt='Expositio ns';"
onclick="document.images['mapitamtamimg'].src='http://www.webdeveloper.com/forum/archive/index.php/images/mapitamtam.gif';">
But, using this method, you won't get the onmouseover effect, as seen with other images; that's where the CSS Sprite method makes things a little easier. The rollover effect is controlled by a a:hover CSS style, not by the javascript, so you don't have two portions of javascript competing against each other.
You could change your javascript, or create a certain script just for this link that controls the hover state and displays the submenu, all through assigning a class or ID to the link in question, but that still involves CSS, which I think you're trying to avoid.
Second issue -- the CSS sprites method is accomplished by splicing two images: what the things look like in a normal state, and what all the things look like when they are in the "mouseover" or hover state. (The background is included in the hover image slices.) Because these images contain the background, they can be spliced into squares. In essence, you're giving the appearance of being exact, when you aren't.
Hope this helps -
KDLA