jamiet757 Posted April 2, 2010 Share Posted April 2, 2010 I want to figure out how I can get a link to appear in a specific spot when a user hovers over the main div. Here is the code I have: <td height="150px" width="150px"> <div align="center" style="width:120px;" class="item_list"> <div style="margin-bottom:5px;"> <a href="{ITEM_URL}" class="preview" title="{ITEM_DESC}" name="Author: {ITEM_AUTHOR}" id="{ITEM_IMG2}"><img src="{ITEM_IMG}" border="0" /></a> </div> <div><a href="{ITEM_URL}"><b>{ITEM_TITLE}</b></a></div> <div class="smalltext">Views: {ITEM_VIEWED}</div> <div class="smalltext">Downloads: {DOWNLOADS}</div> <div id="addtolightbox"></div> </div> </td> The "addtolightbox" is where I want the link to appear when the user hovers over the "item_list" div, there is also an image in the middle and I want the "addtolightbox" link to appear at the bottom (similar to when you edit pages or posts in Wordpress, you hover over the page and the Edit Trash etc. links appear. Quote Link to comment Share on other sites More sharing options...
andrewgauger Posted April 3, 2010 Share Posted April 3, 2010 Actually WordPress creates an absolute position div using coordinates from the instantiating object. The function would generate a new element in html. But if you want to change the HTML inside an existing div, all you need to do is reference the div like this: <div id="addtolightbox"></div> <script language="javascript"> function modDiv(element){ element.innerHTML="<a href=\"script.php\">New Link!</a>"; } function killDiv(element){ element.innerHTML=""; } But that relies on the fact that you setup your div in the right place. If you want your div to overlay the existing Div, you need to define the orriginal div "absolutely" positioned and then dynamically create the element with javascript: So...... what you really want to do is: <script language="javascript"> function makeDiv(parent){ parentTop=parent.offsetTop parentLeft=parent.offsetLeft var newdiv = document.createElement('div'); var divIdName = parent.id+"_popup" newdiv.setAttribute('id',divIdName); newdiv.style.width = "20px"; newdiv.style.height = "20px"; newdiv.style.left = parentLeft+"px"; newdiv.style.top = parentTop+"px"; newdiv.style.position = "absolute"; newdiv.style.background = "FFFFFF"; newdiv.style.border = "1px solid #000"; newdiv.innerHTML = '<a href="script.php">link</a>'; document.body.appendChild(newdiv); } function killDiv(parent){ childobject=parent.id+"_popup"; child=document.getElementById(childobject) document.body.removeChild(child); } </script> <body> <div id="parent" onMouseOver="makeDiv(this)" onMouseOut= "killDiv(this)" style="position:absolute;top">This is the div</div> Paste into html and work from there. *man that one took about an hour of research* 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.