Mardoxx Posted August 1, 2009 Share Posted August 1, 2009 <html> <head> <style type="text/css"> body { font: 11px arial; } .deselected { background-color: #FFFFFF; padding: 2px 6px 2px 6px; } .selected { background-color: #FF6666; padding: 2px 6px 2px 6px; } .deselected_over { background-color: #3366CC; padding: 2px 6px 2px 6px; } .selected_over { background-color: #FF9999; padding: 2px 6px 2px 6px; } </style> <script language="javascript"> function hover(that) { var selected = true; var classes = { "deselected" : "deselected", "deselected_over" : "deselected_over", "selected" : "selected", "selected_over" : "selected_over"} if (that.className == classes['deselected']) { that.className = classes['deselected_over']; selected = false; } else { that.className = classes['selected_over']; } that.onmouseup = function() { that.className = (selected) ? classes['deselected_over'] : classes['selected_over']; selected = !selected; //just incase the user doesn't mouse out of the element } that.onmouseout = function() { that.className = (selected) ? classes['selected'] : classes['deselected']; } } </script> </head> <body> <div class="deselected" onmouseover="javascript:hover(this);">This is was originally deselected (white default, and blue on mouse over)</div> <br /> <br /> <br /> <div class="selected" onmouseover="javascript:hover(this);">This is was originally selected (deep red default, and light red on mouse over)</div> </body> </html> It highlights if clicked and calls mouseover events Quote Link to comment Share on other sites More sharing options...
gevans Posted August 1, 2009 Share Posted August 1, 2009 Was there a question? Quote Link to comment Share on other sites More sharing options...
Mardoxx Posted August 1, 2009 Author Share Posted August 1, 2009 yeah, I was wondering if there was an alternate (even shorter) way of doing that ^ Quote Link to comment Share on other sites More sharing options...
gevans Posted August 1, 2009 Share Posted August 1, 2009 You could streamline the javascript if you used a library like jquery. You could also lose the javascript withing your html elements that way. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.