www.webdeveloper.com
Results 1 to 3 of 3

Thread: Changing page style using onclick

  1. #1
    Join Date
    Mar 2013
    Posts
    1

    Changing page style using onclick

    Hi. Really frustrated witht this. I am extremely intermediate with javascript. I'm trying to create a function that changes the text color, hyperlink color, and an image by selecting a link. So far, i have only been able to get the images to change. Here is the code.

    <html>
    <head>
    <title>Castaway Vacations, LLC</title>
    <script type="text/javascript">
    /* <![CDATA[ */
    function changeStyle(mood){
    if(mood == "rom")
    document.images[1].src="rom_main.jpg";
    document.bgColor="#EBC79E";
    document.body.link="#F2473F";
    document.body.vlink="#FCDC3B";
    document.body.text="#EE2C2C";



    if(mood == "adv")
    document.images[1].src="adv_main.jpg";
    document.bgColor="#CDAB2D";
    document.body.link="#8B5F65";
    document.body.vlink="#FCDC3B";
    document.body.text="#5D478B";


    if(mood == "rel")
    document.images[1].src="rel_main.jpg";
    document.bgColor="#EEEEE0";
    document.body.link="#8B5F65";
    document.body.vlink="#FCDC3B";
    document.body.text="#BCED91";



    if(mood == "fam")
    document.images[1].src="fam_main.jpg";
    document.bgColor="#63B8FF";
    document.body.link="#F0FFF0";
    document.body.vlink="#FCDC3B";
    document.body.text="#BCED91";



    }
    var formWindow;
    function request(linkTarget){
    formWindow = window.open(linkTarget, "formFill", "toolbar=no,menubar=no,location=no,scrollbars=no,resizable=yes,width=350,height=400");
    }
    /* ]]> */
    </script>
    </head>



    <body leftmargin=0 rightmargin=0 bgcolor=#ffcc99 text=#993300 link=#993300 vlink=#996633>
    <br>
    <table width=100% border=0 cellpadding=0 cellspacing=0>
    <tr>
    <td width=95% align=right bgcolor=#ffffff><img src="castaway_logo.jpg"><br><font face=arial>Vacations, LLC</font></td>
    <td bgcolor=#ffffff>&nbsp;</td>
    </tr>
    </table>
    <br><br>
    <center>
    <table width=600>
    <tr>
    <td width=300 valign=top>
    <font face=arial size=3><b><i>Select Mood...</i></b></font><br><br>
    <font face=arial>
    <a href="#" onclick="changeStyle('rom')">Romantic</a><br><br>
    <a href="#" onclick="changeStyle('adv')">Adventure</a><br><br>
    <a href="#" onclick="changeStyle('rel')">Relaxation</a><br><br>
    <a href="#" onclick="changeStyle('fam')">Family</a><br><br><br><br>
    <a href="#" onclick="request('form.html');return false">Request A Brochure...</a>
    </font>
    </td>
    <td align=center><img src="orig_main.jpg"><br><i>Your Vacation Awaits!
    </tr>
    </center>
    </body>
    </html>

  2. #2
    Join Date
    Feb 2012
    Location
    youTUBE
    Posts
    234
    I do believe that you have to change the CSS, to obtain changes for hyperlinks. There may be examples given in older discussions, so try a search. Personally I gave not gotten around to inplementing anything like it.

  3. #3
    Join Date
    Mar 2013
    Location
    Brisneyland, Australia
    Posts
    5
    Try something like:

    Code:
    var links = document.getElementsByTagName("a");
    
    links.style.color = "#000";
    And a good reference - www.w3schools.com/js/js_htmldom_css.asp

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