Jump to content

How to Trigger Event of Other Elements?

Recommended Posts

<!doctype html><html><head><meta charset="utf-8"><title>Untitled Document</title><style type="text/css">.sectionseparator {	background-image:url(/asset/image/accordion_icon_sprite.png);	background-position:0px 0px;}.sectionseparator:hover {	background-image:url(/asset/image/accordion_icon_sprite.png);	background-position:0px 101px;}.sectionseparator.open {	background-image:url(/asset/image/accordion_icon_sprite.png);	background-position:0px 27px;}.sectionseparator.open:hover {	background-image:url(/asset/image/accordion_icon_sprite.png);	background-position:0px 64px;}</style><script language="javascript" type="text/javascript">function imgHover(o){        //what script shoud I put here??};function showHideInfo(o){        //Don't worry about this. Already done.};</script></head><body><a id="section-spg" href="#" onClick="showHideInfo(this);" onMouseOver="imgHover(this);"><img id="section-spg-img" src="/asset/image/invis.gif" width="27" height="27" class="sectionseparator" style=" position:absolute;margin-top:5px;"> <div style="display:inline-block; position: relative; top:6px; left:35px;">SPG</div></a><div id="spg-info">SPG Info</div></body></html>

I want background image of 'section-spg-img' changed as 'sectionseparator:hover' when I hover mouse in any region within 'section-spg'. I've searching and try every event method. Either I'm stupid enough and failed or I'm not understand anything about event.


Image sprite contain {+,hovered +, -, hovered -}.

showHideInfo() change either + or - of the image and show or hide 'spg-info'. (success)

imgHover() change either hovered + or hovered - of the image. (failed)


Example : http://www.microsoft.com/en-us/download/details.aspx?id=30653 (Detail, System Requirement, etc...)


I don't wanna use jQuery.

Thank you.

Edited by Fiq

Share this post

Link to post
Share on other sites

Simpler example maybe? We don't have your images.



<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><title>title</title><script>window.onerror = function(a, b, c, d){alert('Javascript Error:n'+a+'nURL: '+b+'nLine: '+c+'  Column: '+d);return true;}</script><style>#div1{  background-color: gray;  width:100px;  height:100px;  border:1px solid #bbb;}#div1:hover{  background-color: pink;}#div2{  width:30px;  height:30px;  border:1px solid #bbb;}.div2i{background-color: #ccc;}.div2h{background-color: orange;}.div2c{background-color: yellow;}</style><script>function showHover(o){   document.getElementById('debug').innerHTML += '[hover:' + o.id + '] ';   document.getElementById('div2').className = 'div2h';}function showClick(o){   document.getElementById('debug').innerHTML += '[click:' + o.id + '] ';   document.getElementById('div2').className = 'div2c';}</script></head><body><div id="div1" onClick="showClick(this);" onMouseOver="showHover(this);"><div id="div2" class="div2i"></div></div><hr/><div id="debug"></div></body></html>

Share this post

Link to post
Share on other sites

You can't add a pseudo class like :hover to an element using Javascript. What you can do is give the hover rules an additional class name and then add and remove that class to the other elements.

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Create New...