www.webdeveloper.com
Results 1 to 3 of 3

Thread: Can't figure out onMouseOver to change images and the accordion

Hybrid View

  1. #1
    Join Date
    Dec 2012
    Posts
    2

    Can't figure out onMouseOver to change images and the accordion

    Hi I have been trying to find out this two simple program for class and have googled it and reread my book over and over again but I'm totally stuck. Ok here's the issues...

    First, I need to use javascript to change an image when mousing over a link. I can't seem to get the function "file" to recognize the work 'asian' as the file name. When I use google chrome to look at what file it's trying to find it is looking in ...../images/+file+.jpg instead of for the ..../images/asian.jpg file. I think I have the code part write because the image changes but just to the symbol that it hasn't found the image it was looking for, so I'm just not sure what I am doing wrong with the + file + part. Thanks

    HTML Code:
    function switchPix(file,desc){
      document.getElementById('pix').innerHTML = '<img src=\"images/ + file + .jpg\" width = \"480\" height = \"270\" alt=\"desc\" />';
    }
    HTML Code:
    <li><a href="http://www.asianart.org/" onmouseover="switchPix('asian','Asian Art Museum')">Asian Art Museum</a></li>


    Then the second part is I have to open up a section like the accordion. I can get the open part to work on each part but the close never works. The error that is returned in chrome inspector tool is "Uncaught TypeError: Cannot read property 'style' of null. This stuff is all pretty new to me and the book is terrible so not sure why the open part is working and the closing is not. Thanks for your help!

    HTML Code:
    var openAccordion = '';
    function runAccordion(index) {
      var nID ='Accordion' + index + 'Content';
      if (openAccordion == nID){
        nID = '';
      }
      var opening = (nID == '') ? null : document.getElementById(nID);
      var closing = (openAccordion == '') ? null : document.getElementById(openAccordion);
      
      if (opening != null){
        opening.style.height = '300px';
        opening.style.display = 'block';
      }
      if (closing == null){
        closing.style.height = '0px';
        closing.style.display = 'none';
      }
      openAccordion = nID;
    }
    HTML Code:
    <h3 class="AccordionTitle"><a href="#" onclick='runAccordion(1)' onselectstart='return false'>Purple</a></h3>
            <div class="AccordionContent" id="Accordion1Content">

  2. #2
    Join Date
    Aug 2008
    Location
    Sweden
    Posts
    227
    Code:
    '<img src=\"images/ + file + .jpg\" width = \"480\" height = \"270\" alt=\"desc\" />'
    should be
    Code:
    '<img src=\"images/' + file + '.jpg\" width = \"480\" height = \"270\" alt=\"' + desc + '\" />'
    (Notice the extra single quotes around file and desc.) What you wanted to do was to insert the value of 'file' between two strings, but instead you put the string " + file + " in place of 'file's value. Kinda the same for 'desc'.

    Secondly, if closing is null then you simply can't set the closing.style property, because (as the error says) null does not have a style property, so that whole if-statement is invalid. Instead, check if closing is not null before hiding the element (just like you do with opening).
    Last edited by ReFreezed; 12-04-2012 at 08:11 AM.

  3. #3
    Join Date
    Dec 2012
    Posts
    2
    Awesome those both fixed the issues! I knew it was just some easy fix I was missing haha! Thanks

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles