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? Link to comment https://forums.phpfreaks.com/topic/228074-css-hover-functon-into-javascript-onclick-function-help/ 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. Link to comment https://forums.phpfreaks.com/topic/228074-css-hover-functon-into-javascript-onclick-function-help/#findComment-1176105 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 Link to comment https://forums.phpfreaks.com/topic/228074-css-hover-functon-into-javascript-onclick-function-help/#findComment-1176108 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'. Link to comment https://forums.phpfreaks.com/topic/228074-css-hover-functon-into-javascript-onclick-function-help/#findComment-1176109 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; } Link to comment https://forums.phpfreaks.com/topic/228074-css-hover-functon-into-javascript-onclick-function-help/#findComment-1176125 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. Link to comment https://forums.phpfreaks.com/topic/228074-css-hover-functon-into-javascript-onclick-function-help/#findComment-1176150 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.