SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2011
    Location
    The land of nod
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image changing and changing innerHTML with JS : Query

    Hi all,

    Ive got a small image of a power button and when pressed the inner section on the button changes to yellow, but when its pressed down Im also trying to get part of my H1 (main header logo title) to change to yellow.

    Ive created a span with an id surrounding the letters of the H1 that I want to change, the id being : "power";

    The javascript that I have come up with so far and works is as follows:

    <img id="poweron" src="http://www.sitepoint.com/forums/images/power.png" alt="Power on button" onmousedown="this.src='images/poweron.png';" onmouseup="this.src='images/power.png';"/>

    From a previous script I had help with on this very forum, I understand Im not really supposed to be using inline JS, and I know Ive got to create a function for the onmousedown event to trigger changing the H1 text, so am I under the right impression that the JS so far written is redundant and will have to be re-written so thats contained within a script placed just before the closing </body> and an external script for invoking the main function ?
    Attached Images Attached Images

  2. #2
    SitePoint Zealot
    Join Date
    Feb 2011
    Location
    The land of nod
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    First attempt at writing the code in an external JS fileCan get the image working fine in that it changes the image, but I just cannot get the innerHTML to change the font color...)

    function powerImage(){
    document.images["light"].src ="http://www.sitepoint.com/forums/images/power.png";
    return true;
    };

    function powerOnImage(){
    document.images["light"].src ="http://www.sitepoint.com/forums/images/powerOn.png";
    return true;
    change = document.getElementById("lightsOn");
    change.innerHTML.style.color="#ff0";
    };


    HTML code for the image(button) is as follows:

    <a href="#" onClick="return powerOnImage()" onDblClick="return powerImage()"><img name="light" src="http://www.sitepoint.com/forums/images/power.png" alt="Power on button"/></a>

    HTML code for the H1 heading text Im trying to change is as follows:

    <h1 id="subH1"><span id="lightsOn" >PAT</span>Tester</h1>

  3. #3
    SitePoint Zealot
    Join Date
    Feb 2011
    Location
    The land of nod
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cracked it now :-)

    Thats my JS code...

    function powerImage(){

    document.images["letThereBeLight"].src ="images/power.png";
    document.getElementById("subH1").style.color="#fff";
    return true;
    };

    function powerOnImage(){

    document.images["letThereBeLight"].src ="images/powerOn.png";
    document.getElementById("subH1").style.color="#ffd700";
    return true;
    };


    and my HTML is :

    <a href="#" onClick="return powerOnImage()" onDblClick="return powerImage()"><img id="letThereBeLight" src="images/power.png" alt="Power on button"/></a>

    and heading text HTML:

    <h1 id="subH1">PAT Testing Specialist</h1>


Bookmarks

Posting Permissions

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