Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Nov 2011
    Location
    Sydney, Australia
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question How to make something change when onmouseover a different thing?

    Um hello everyone. I'm Emeralds and I'm still really new to Javascript, but while I was writing a quick script for something I'm working on, I encountered a problem and I'm not sure at all of what it is and how to fix it.

    My script is in an external javascript file in a folder called js. I'm basically trying to get a title, tagline, and image to change (into different things) when the mouse is hovered over a variety of different elements.

    For example, when the mouse is hovered over the first thumbnail, then the title, picture, and tagline (in a different element) will change.

    This is the code I'm using:

    Code:
    // Pictures are stored in an array
     if (document.images) {
     img00= new Image
     img01=new Image
     img02=new Image
     img03=new Image
     img04=new Image
     img00.src ="../images/start.gif"
     img01.src="../images/1.gif"
     img02.src="../images/2.gif"
     img03.src="../images/3.gif"
     img04.src="../images/4.gif"
     img05.src="../images/5.gif"
     }
     
    function MouseOver() 
    {
     document.getElementById("lformat-title… ="Changed title";
     document.getElementById("lformat-tagli… = "Tagline Here";
     document.getElementById("lformat-image…
     }
     
    
    function MouseOut() 
    {
     document.getElementById("lformat-image… = img00.src;
     document.getElementById("lformat-title… = "default title";
     document.getElementById("lformat-tagli… = "default tagline";
     }
    In the HTML, when a <li> is hovered over, it will activate the mouseOver() and mouseOut() events.
    Code:
     <ul>
     <li onmouseover="mouseOver()" onmouseout="mouseOut()">
     <img src="images/thumbnail1.gif">
     <p>Text here</p>
     </li>
     </ul>
    And the thing that will be changed is this:
    Code:
     <h1 id="lformat-title">Example Title</h1>
     <h2 id="lformat-tagline">Example Tagline</h2>
     <img src="images/start.gif" />
    The code isn't working when I load it up. The title and tagline change, but the images don't.

    As I said, I'm still really new so I'd appreciate any help greatly!
    Thankyou!

    ~Emeralds
    Last edited by Emeralds; 11-01-2011 at 07:51 AM.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,092
    Thanks
    23
    Thanked 594 Times in 593 Posts
    You have to watch capitalization.

    <li onmouseover="MouseOver()" onmouseout="MouseOut()">

    Cap M not m

  • #3
    New to the CF scene
    Join Date
    Nov 2011
    Location
    Sydney, Australia
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Oh right! Thanks! I didn't see that... D:
    Anyway, I fixed it but it still doesn't work...
    However, I moved the script out of the js folder and it's working for some reason now though! Do you know what might be causing this? Whenever I move it back into another folder, it just seems to not work?

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,092
    Thanks
    23
    Thanked 594 Times in 593 Posts
    How are you calling it? Here's one way:
    <script type="text/javascript" src="xxx.js"></script>

    With this way you don't need the <script type="text/javascript"> in the file at all. If you do a require or include you do.

    How are you calling it? What does the js file look like. and where is it ( in what folder and where is the folder)?


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •