SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: javascript css

  1. #1
    SitePoint Zealot Nova's Avatar
    Join Date
    Sep 2002
    Location
    Netherlands
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    javascript css

    hello,

    i got a lil problem

    <img src="img/bb/bold.gif" style="border:#669999 solid 1px;" onmousedown="this.style.background='#000000'" onmouseup="this.style.background=''" onmouseover="this.style.border='black solid 1px'" onmouseout="this.style.border='#669999 solid 1px'" onClick="javascript:bbstyle('','')"></td>

    i want to use a css class in the onmousedown
    so that this.style.background='some color'

    changes in
    onmousedown(activate the css class);

    hope some one can help me
    if you can't beat them call them cheaters

    www.phppatterns.nl

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I'm not sure I understand correctly. Aren't you already doing what you want.
    onmousedown="this.style.background='#000000'"
    Of course the image will need to have transparent areas for the background to show through.

    Paul

  3. #3
    SitePoint Zealot Nova's Avatar
    Join Date
    Sep 2002
    Location
    Netherlands
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    no what i mean was that this.style.background=' #000000'

    must refrere to a css class

    so if the do a onmousedown it must import the color from the css stylesheet
    if you can't beat them call them cheaters

    www.phppatterns.nl

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,
    Sorry, I don't know how to do that (my javascript is pretty basic).

    For IE only you could find the currentstyle of the element and save it and then reinstate it. IE only though.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    #outer {
    background:red}
    </style>
    <script type="text/javascript">
    function changebg(bg,bg1,x) {
    if (x) {
     oldbg=bg;
     bg1.style.background="#000000";
     }
     else
     {
     bg1.style.background=oldbg;
     }
    }
    </script>
    </head>
    <body>
    <div id="outer" onmousedown="changebg(this.currentStyle.backgroundColor,this,1)" onmouseup="changebg(this,this,0)" >
    Hello
    </div>
    </body>
    </html>
    Sorry I can't be of more help.

    Paul

  5. #5
    SitePoint Zealot johno's Avatar
    Join Date
    Sep 2003
    Location
    Bratislava, Slovakia
    Posts
    184
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this piece!

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    
    <html>
    <head>
    	<title>Untitled</title>
    	<script type="text/javascript">
    	function changeClass(elm, name) { elm.className = name;	}
    	</script>	
    	<style type="text/css">
    
    	body { margin: 20px; }
    	.red { background-color: red; }
    	.blue { background-color: blue; }
    	.default { background-color: yellow; }
    
    	</style>	
    </head>
    
    <body>
    <p class="default" onmousedown="changeClass(this, 'red');" onmouseup="changeClass(this, 'blue');">Bla asklj hdaskj hdaksj hdksajhd ksha has hsakj hdask hdkasjhd kasdh</p>
    </body>
    </html>


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
  •