www.webdeveloper.com
Results 1 to 3 of 3

Thread: Changing page style using onclick

Hybrid View

  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.
    Knowledge is that which can be shown to be the case, and Intelligence is the method one uses to deploy the demonstration of what is the case, everything else is Information.

    For a stronger Text reading try:
    http://www.wyc3.com/diction.php

  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