mouseover change div and image

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • alex.kemsley@hottubs2buy.co.uk
    #1

    mouseover change div and image

    Dear all,
    I am a very novice javascriper and have cobled this together from
    various places. I didnt expect it to work but hopefully will give you
    an idea of what i want to achive.
    I need 5 links that when you mouseover it, it displays the corisponding
    div and separate image. When you mouse out it goes back to the defult.
    first link.
    I hope you get the idea.
    Please help as i will never mange this on my own
    Many thanks
    Alex Kemsley


    <html>
    <head>
    <title></title>

    <script type="text/javascript">
    function doStuff(el) {
    document.all.tu bimage.src=el+" .jpg";
    document.getEle mentById.el.sty le.display="blo ck";

    el.onmouseout=f unction() {
    document.all.tu bimage.src="mon aco.jpg";
    document.getEle mentById.el.sty le.display="non e";
    }
    }

    </script>

    </head>
    <body>


    <p>
    <img src="monaco.jpg " alt="" id="tubimage" /></p>

    <a onmouseover="do Stuff(monaco)"> Monaco</a><br />
    <a onmouseover="do Stuff(sttropez) ">St Tropez</a<br />
    <a onmouseover="do Stuff(barclona) "Barcelona</a><br />
    <a onmouseover="do Stuff(milan)">M ilan</a><br />
    <a onmouseover="do Stuff(prague)"> Prague</a><br />
    </p>


    <div id="monaco" style="display: none">
    monaco text
    </div>
    <div id="sttropez" style="display: none">
    sttropez text
    </div>
    <div id="barcelona" style="display: none">
    barclona text
    </div>
    <div id="milan" style="display: none">
    milan text
    </div>
    <div id="prague" style="display: none">
    prague text
    </div>

    </body>
    </html>

    Tags: None
    • Paul Davis
      #2
      Re: mouseover change div and image

      First, quote the values in the links.
      change this:
      <a onmouseover="do Stuff(monaco)"> Monaco</a><br />
      to this:
      <a onmouseover="do Stuff('monaco') ">Monaco</a><br />

      Next, use getElementById as a method:
      document.getEle mentById.el.sty le.display="blo ck";
      becomes:
      document.getEle mentById(el).st yle.display="bl ock";

      Your el.mouseout is completely broken but, with good intentions. delete
      that.

      I'm going to recommend that you do the following:
      make your links like this:
      <a onmouseover="sh ow('monaco')"
      onmouseout="hid e('monaco')">Mo naco</a><br />
      and use some js like this:
      function show(name){
      document.all.tu bimage.src=name +".jpg";
      document.getEle mentById(name). style.display=" block";
      }
      function hide(name){
      document.all.tu bimage.src="mon aco.jpg";
      document.getEle mentById(name). style.display=" none";
      }

      There are some better ways to do this but, it looks like you are still
      getting started.

        Comment

        • Randy Webb
          #3
          Re: mouseover change div and image

          Paul Davis said the following on 7/26/2006 2:35 PM:
          First, quote the values in the links.
          No, first you quote what you are replying to.
          change this:
          <a onmouseover="do Stuff(monaco)"> Monaco</a><br />
          to this:
          <a onmouseover="do Stuff('monaco') ">Monaco</a><br />
          OK, not sure I agree but ok.
          Next, use getElementById as a method:
          There is no other way to use it.....
          document.getEle mentById.el.sty le.display="blo ck";
          becomes:
          document.getEle mentById(el).st yle.display="bl ock";
          >
          Your el.mouseout is completely broken but, with good intentions. delete
          that.
          I'm going to recommend that you do the following:
          Don't.
          make your links like this:
          <a onmouseover="sh ow('monaco')"
          onmouseout="hid e('monaco')">Mo naco</a><br />
          and use some js like this:
          function show(name){
          document.all.tu bimage.src=name +".jpg";
          And then wonder why it only works in IE?

          Besides, don't use document.all or gEBI to access an image, use the
          Images collection:

          document.images['tubimage'].src = name + ".jpg";
          document.getEle mentById(name). style.display=" block";
          }
          function hide(name){
          document.all.tu bimage.src="mon aco.jpg";
          Ditto.
          document.getEle mentById(name). style.display=" none";
          }
          >
          There are some better ways to do this but,
          There are more better ways to do it than worse ways to do it than the
          way you did it.
          it looks like you are still getting started.
          Then now is the time to teach good habits, not to say "You are just
          getting started so here are some bad habits for you.
          --
          Randy
          comp.lang.javas cript FAQ - http://jibbering.com/faq & newsgroup weekly
          Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

            Comment

            • ~A!
              #4
              Re: mouseover change div and image


              Randy Webb wrote:
              Paul Davis said the following on 7/26/2006 2:35 PM:
              First, quote the values in the links.
              >
              No, first you quote what you are replying to.
              >
              change this:
              <a onmouseover="do Stuff(monaco)"> Monaco</a><br />
              to this:
              <a onmouseover="do Stuff('monaco') ">Monaco</a><br />
              >
              OK, not sure I agree but ok.
              >
              Next, use getElementById as a method:
              >
              There is no other way to use it.....
              >
              document.getEle mentById.el.sty le.display="blo ck";
              becomes:
              document.getEle mentById(el).st yle.display="bl ock";

              Your el.mouseout is completely broken but, with good intentions. delete
              that.
              I'm going to recommend that you do the following:
              >
              Don't.
              >
              make your links like this:
              <a onmouseover="sh ow('monaco')"
              onmouseout="hid e('monaco')">Mo naco</a><br />
              and use some js like this:
              function show(name){
              document.all.tu bimage.src=name +".jpg";
              >
              And then wonder why it only works in IE?
              >
              Besides, don't use document.all or gEBI to access an image, use the
              Images collection:
              >
              document.images['tubimage'].src = name + ".jpg";
              >
              document.getEle mentById(name). style.display=" block";
              }
              function hide(name){
              document.all.tu bimage.src="mon aco.jpg";
              >
              Ditto.
              >
              document.getEle mentById(name). style.display=" none";
              }

              There are some better ways to do this but,
              >
              There are more better ways to do it than worse ways to do it than the
              way you did it.
              >
              it looks like you are still getting started.
              >
              Then now is the time to teach good habits, not to say "You are just
              getting started so here are some bad habits for you.
              --
              Randy
              comp.lang.javas cript FAQ - http://jibbering.com/faq & newsgroup weekly
              Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

              Well, that was nasty for no good reason. Nice ta meetcha.

              ~A!

                Comment

                • Paul
                  #5
                  Re: mouseover change div and image

                  Since I am a bad person:

                  var toggleDivs = (function() {
                  return {
                  show : function(anchor Ref,elemId) {
                  document.getEle mentById("tubim age").src= elemId+".jpg";
                  document.getEle mentById(elemId ).style.display = "block";
                  anchorRef["elemId"] = elemId;
                  anchorRef.onmou seout = toggleDivs.hide ;

                  },
                  hide : function() {
                  document.getEle mentById("tubim age").src = "monaco.jpg ";
                  document.getEle mentById(this["elemId"]).style.display = "none";
                  }
                  };
                  })();
                  ¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯ ¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯ ¯¯
                  <a onmouseover="to ggleDivs.show(t his,'monaco')" href="#">Monaco </a><br
                  />
                  <a onmouseover="to ggleDivs.show(t his,'sttropez') " href="#">St
                  Tropez</a><br />
                  <a onmouseover="to ggleDivs.show(t his,'barcelona' )"
                  href="#">Barcel ona</a><br />
                  <a onmouseover="to ggleDivs.show(t his,'milan')" href="#">Milan</a><br />
                  <a onmouseover="to ggleDivs.show(t his,'prague')" href="#">Prague </a><br
                  />

                    Comment

                    Previous template Next
                    Working...