changing div styles in image maps

Discussion in 'Javascript' started by prash.marne@gmail.com, Feb 28, 2007.

  1. Guest

    hi all,
    this is an intresting thing ,

    i have a simple image map (with world map image),

    in which i have diffrent regions specified ,also i have mentioned the
    region names next to the map image
    so now the functionality i want is :-

    whenever the user hovers on the region (lets say :europe) the text
    (europe) next to the image should change to bold & also the color
    should change .

    in the same way i have to change many dives for diffent regions

    any help how i can change the classes for those dives after user
    hovers on it ..? ,

    thanks in advance,

    Prashant.
     
    , Feb 28, 2007
    #1
    1. Advertisements

  2. ASM Guest

    a écrit :
    > whenever the user hovers on the region (lets say :europe) the text
    > (europe) next to the image should change to bold & also the color
    > should change .
    >
    > in the same way i have to change many dives for diffent regions



    function boldIt(what) {
    what = document.getElementById(what).style;
    what.fontWeight = what.fontWeight=''? 'bold' : '';
    }

    <map ...
    <area onmouseover="boldIt('div1');" onmouseout="boldIt('div1');" ...

    <dt id="div1">Europe</dt>


    and if you prefer class :

    function boldIt(what) {
    what = document.getElementById(what);
    what.className = what.className=''? 'highlight' : '';
    }


    Idea :
    ------

    CSS :
    =====
    #myMap { border:1px solid black; padding: 8px }
    #myMap img { float: left; width: 200px; }
    #myMap dl { position:relative; margin-left: 210px }
    #myMap dt { color: blue }
    #myMap dt.highligth { font-weight: bold; color: red }
    #myMap dd { visibility: hidden }
    #myMap dd.highligth { visibily: visible }

    JS :
    ====
    function higtLight(what) {
    var D = document.getElementById('text_'+what);
    var L = document.getElementById('legend_'+what);
    D.className = D.className=''? 'highlight' : '';
    L.className = L.className=''? 'highlight' : '';
    }

    HTML :
    ======
    <div id="myMap">
    <img usemap="#wrldMap"
    src="world.jpg" alt"World Map" title"Oveflow me" />
    <dl>
    <dt id="legend_eur'>Europe</dt>
    <dd id="text_eur'>Somewhere in North side</dd>
    <dt id="legend_asi'>Asia</dt>
    <dd id="text_asi'>Somewhere in South side</dd>
    </dl>
    <map name="wrldMap>
    <AREA HREF="europe.htm" ... blah ...
    onmouseover="higtLight('eur');"
    onmouseout="higtLight('eur');>
    <AREA HREF="asia.htm"... blah ...
    onmouseover="higtLight('asi');"
    onmouseout="higtLight('asi');>
    </map>
    </div>

    --
    Stephane Moriaux et son (moins) vieux Mac déjà dépassé
    Stephane Moriaux and his (less) old Mac already out of date
     
    ASM, Feb 28, 2007
    #2
    1. Advertisements

  3. Guest

    hey tahnks for your reply ,
    u guys are relly helpful for beginers like me...

    but the thing dosent work in my case i have tried a simple one ...
    <html>
    <head>
    <script type="text/javascript">

    function boldIt(what) {
    what = document.getElementById(what).style;
    what.fontWeight = what.fontWeight=''? 'bold' : '';
    }
    </script>
    </head>
    <body>
    <img scr="wrld_map.jpg" type="image/jpg" usemap="#wrldMap">
    <map name="wrldMap"
    <area href="#" shape="poly" coords="........"
    onmouseover="boldIt('div1');" onmouseout="boldIt('div1');">
    </map>
    <div id="div1">Europe</div>
    </body>
    </html>

    do i need to add some more stuff ....?? or i am getting wrong
    somwhere ...??
    thanks,
     
    , Feb 28, 2007
    #3
  4. ASM Guest

    a écrit :
    > hey tahnks for your reply ,


    Please left some trace of post you're answering.

    > u guys are relly helpful for beginers like me...
    >
    > but the thing dosent work in my case i have tried a simple one ...


    > <html>
    > <head>
    > <script type="text/javascript">


    /* *** Ooops ! little error ! **** */

    function boldIt(what) {
    what = document.getElementById(what).style;
    what.fontWeight = what.fontWeight==''? 'bold' : '';
    }

    > </script>
    > </head>
    > <body>
    > <img scr="wrld_map.jpg" type="image/jpg" usemap="#wrldMap">
    > <map name="wrldMap"
    > <area href="#" shape="poly" coords="........"


    with real coords it would be better

    > onmouseover="boldIt('div1');" onmouseout="boldIt('div1');">
    > </map>
    > <div id="div1">Europe</div>
    > </body>
    > </html>
    >
    > do i need to add some more stuff ....?? or i am getting wrong
    > somwhere ...??


    Not seems so.

    And if you try the "idea"
    correct it same way as above (two '=' insteed one '=' in condition)

    function higtLight(what) {
    var D = document.getElementById('text_'+what);
    var L = document.getElementById('legend_'+what);
    D.className = D.className==''? 'highlight' : '';
    L.className = L.className==''? 'highlight' : '';
    }


    --
    Stephane Moriaux et son (moins) vieux Mac déjà dépassé
    Stephane Moriaux and his (less) old Mac already out of date
     
    ASM, Feb 28, 2007
    #4
  5. Guest

    On Feb 28, 11:15 pm, ASM <>
    wrote:
    > a écrit :
    >
    > > hey tahnks for your reply ,

    >
    > Please left some trace of post you're answering.
    >
    > > u guys are relly helpful for beginers like me...

    >
    > > but the thing dosent work in my case i have tried a simple one ...
    > > <html>
    > > <head>
    > > <script type="text/javascript">

    >
    > /* *** Ooops ! little error ! **** */
    >
    > function boldIt(what) {
    > what = document.getElementById(what).style;
    > what.fontWeight = what.fontWeight==''? 'bold' : '';
    >
    > }
    > > </script>
    > > </head>
    > > <body>
    > > <img scr="wrld_map.jpg" type="image/jpg" usemap="#wrldMap">
    > > <map name="wrldMap"
    > > <area href="#" shape="poly" coords="........"

    >
    > with real coords it would be better
    >
    > > onmouseover="boldIt('div1');" onmouseout="boldIt('div1');">
    > > </map>
    > > <div id="div1">Europe</div>
    > > </body>
    > > </html>

    >
    > > do i need to add some more stuff ....?? or i am getting wrong
    > > somwhere ...??

    >
    > Not seems so.
    >
    > And if you try the "idea"
    > correct it same way as above (two '=' insteed one '=' in condition)
    >
    > function higtLight(what) {
    > var D = document.getElementById('text_'+what);
    > var L = document.getElementById('legend_'+what);
    > D.className = D.className==''? 'highlight' : '';
    > L.className = L.className==''? 'highlight' : '';
    >
    > }
    >
    > --
    > Stephane Moriaux et son (moins) vieux Mac déjà dépassé
    > Stephane Moriaux and his (less) old Mac already out of date


    cool the problem is solved....
    thanks once again.....
     
    , Mar 9, 2007
    #5
    1. Advertisements

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Simon Elliott
    Replies:
    4
    Views:
    1,232
    Simon Elliott
    Mar 10, 2005
  2. Marcus
    Replies:
    2
    Views:
    651
    Marcus
    Dec 9, 2005
  3. K Viltersten

    <div ... /> and <div ...></div>

    K Viltersten, Mar 30, 2009, in forum: ASP .Net
    Replies:
    4
    Views:
    895
  4. Dwayne Madsen

    Q: Div A inside Div B is larger than Div B

    Dwayne Madsen, Jun 1, 2005, in forum: Javascript
    Replies:
    1
    Views:
    292
    David Dorward
    Jun 1, 2005
  5. mscir
    Replies:
    3
    Views:
    400
    Martin Honnen
    Jun 26, 2005
Loading...

Share This Page