Minimeallolla Posted February 18, 2011 Share Posted February 18, 2011 .image-hover { border:0; position:center; width:auto; height:auto; z-index:10000; } a.image img { width:75x; height:75px; } a.image:hover img { border:0; position:center; width:auto; height:auto; z-index:10000; } Is there a way of turning those hover functions into a javascript onclick function? Quote Link to comment Share on other sites More sharing options...
gizmola Posted February 18, 2011 Share Posted February 18, 2011 I'm not sure I understand the question. Stylesheets do not support procedural code. They style and format. onClick is a specific event that fires when you "click". The event that matches "hovering" is the "onMouseOver" event, so you can run javascript code when you mouseover an object in the same way that you can run code when you click on an object. Quote Link to comment Share on other sites More sharing options...
Minimeallolla Posted February 18, 2011 Author Share Posted February 18, 2011 try this alternative explaination.. http://pastebin.com/BbLdRCGL Quote Link to comment Share on other sites More sharing options...
haku Posted February 18, 2011 Share Posted February 18, 2011 You need to look into CSS Sprites. These allow a background image to be changed on hover, and that same background image can be set on :active (which will effectively be 'onclick'. Quote Link to comment Share on other sites More sharing options...
Minimeallolla Posted February 18, 2011 Author Share Posted February 18, 2011 @haku, That is not what I want to achieve. That is all the code you need to see what I'm trying to do. Onclick it will expand the image from the default set 75x75pixels to auto (100%) What I'm trying to do is revert back to its default size onclick. <!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Funny Pictures</title> <script type="text/javascript" src="Interactive.js"></script> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <a class="image" onClick="this.className = 'new_class'; return false;"><img src="Pics/batman.png" alt="I'm Teh Batman!" /></a> </body> </html> Javascript onClick="this.className = 'image-expand'"; Css. a.image img { width:75x; height:75px; } a.image-expand { border:0; position:center; width:auto; height:auto; z-index:10000; } Quote Link to comment Share on other sites More sharing options...
gizmola Posted February 18, 2011 Share Posted February 18, 2011 Just change your onclick to use the ternary operator, to toggle the state from one style to another. 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.