|
[ ! ] Hover Links; Make this code work for zeta?
|
|
Topic Started: Jan 1 2014, 01:05 PM (478 Views)
|
|
BrookeNicole
|
Jan 1 2014, 01:05 PM
Post #1
|
- Posts:
- 2
- Group:
- Members
- Member
- #613,116
- Joined:
- January 1, 2014
- I'm Browsing With
- Chrome
|
Board Address: Under construction, so my board is offline at the moment. Board Software: Zetaboards Description:
I've used this code before on InvisionFree boards before, and it works just fine there. However, for my new site I'm going back to zetaboards and I have not been able to make it work.
What the code does is allow the user to hover over an image and the links appear. I was hoping one of you wonderful volunteers could modify it or write me a new code so I can have this on my site...or maybe just tell me what I am doing wrong.
Here is a link to where I found the code.
And here is a link to a site that has the code in action so you can see what I am talking about because I am horrible at describing things.
|
|
|
| |
|
-The-
|
Jan 1 2014, 02:25 PM
Post #2
|
- Posts:
- 1,325
- Group:
- Members
- Member
- #610,631
- Joined:
- August 18, 2013
- I'm Browsing With
- Safari
- My Board URL
- http://FoundationZB.com
- Latest Design
- zPad
- Latest Blog Entry
- http://if.invisionfree.com/blog/main/2106385/
|
Just saying that although I have no hope of fixing it, the link which redirects us to where you got the link isn't very useful as it Caution 2.0 doesn't appear to let guests in, is there any way for you to post the code here for us?
|
|
|
| |
|
BrookeNicole
|
Jan 1 2014, 02:30 PM
Post #3
|
- Posts:
- 2
- Group:
- Members
- Member
- #613,116
- Joined:
- January 1, 2014
- I'm Browsing With
- Chrome
|
Oops! Completely forgot that you have to be registered with Caution to see the site. Here it is.
- Code:
-
<center> <style type="text/css"> #popitmenu{ position: absolute; background-color: 191919; border:1px #191919; font: normal 9px georgia; line-height: 18px; z-index: 100; visibility: hidden; }
#popitmenu a{ text-decoration: none; padding-left: 6px; color: #616161; display: block; }
#popitmenu a:hover{ /*hover background color*/ background-color: #214c82; }
</style>
<script type="text/javascript">
/*********************************************** * Pop-it menu- © Dynamic Drive (www.dynamicdrive.com) * This notice MUST stay intact for legal use * Visit http://www.dynamicdrive.com/ for full source code ***********************************************/
var defaultMenuWidth="130px" //set default menu width.
var linkset=new Array() //SPECIFY MENU SETS AND THEIR LINKS. FOLLOW SYNTAX LAID OUT
linkset[0]='<a href="LINK URL">LINK DESCRIPTION</a>' linkset[0]+='<a href="LINK URL">LINK DESCRIPTION</a>' linkset[0]+='<a href="LINK URL">LINK DESCRIPTION</a>' linkset[0]+='<a href="LINK URL">LINK DESCRIPTION</a>' linkset[0]+='<a href="LINK URL">LINK DESCRIPTION</a>'
////No need to edit beyond here
var ie5=document.all && !window.opera var ns6=document.getElementById if (ie5||ns6) document.write('<div id="popitmenu" onMouseover="clearhidemenu();" onMouseout="dynamichide(event)"></div>') function iecompattest(){ return (document.compatMode && document.compatMode.indexOf("CSS")!=-1)? document.documentElement : document.body } function showmenu(e, which, optWidth){ if (!document.all&&!document.getElementById) return clearhidemenu() menuobj=ie5? document.all.popitmenu : document.getElementById("popitmenu") menuobj.innerHTML=which menuobj.style.width=(typeof optWidth!="undefined")? optWidth : defaultMenuWidth menuobj.contentwidth=menuobj.offsetWidth menuobj.contentheight=menuobj.offsetHeight eventX=ie5? event.clientX : e.clientX eventY=ie5? event.clientY : e.clientY //Find out how close the mouse is to the corner of the window var rightedge=ie5? iecompattest().clientWidth-eventX : window.innerWidth-eventX var bottomedge=ie5? iecompattest().clientHeight-eventY : window.innerHeight-eventY //if the horizontal distance isn't enough to accomodate the width of the context menu if (rightedge<menuobj.contentwidth) //move the horizontal position of the menu to the left by it's width menuobj.style.left=ie5? iecompattest().scrollLeft+eventX-menuobj.contentwidth+"px" : window.pageXOffset+eventX-menuobj.contentwidth+"px" else //position the horizontal position of the menu where the mouse was clicked menuobj.style.left=ie5? iecompattest().scrollLeft+eventX+"px" : window.pageXOffset+eventX+"px" //same concept with the vertical position if (bottomedge<menuobj.contentheight) menuobj.style.top=ie5? iecompattest().scrollTop+eventY-menuobj.contentheight+"px" : window.pageYOffset+eventY-menuobj.contentheight+"px" else menuobj.style.top=ie5? iecompattest().scrollTop+event.clientY+"px" : window.pageYOffset+eventY+"px" menuobj.style.visibility="visible" return false } function contains_ns6(a, b) { //Determines if 1 element in contained in another- by Brainjar.com while (b.parentNode) if ((b = b.parentNode) == a) return true; return false; } function hidemenu(){ if (window.menuobj) menuobj.style.visibility="hidden" } function dynamichide(e){ if (ie5&&!menuobj.contains(e.toElement)) hidemenu() else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget)) hidemenu() } function delayhidemenu(){ delayhide=setTimeout("hidemenu()",500) } function clearhidemenu(){ if (window.delayhide) clearTimeout(delayhide) } if (ie5||ns6) document.onclick=hidemenu </script>
<a href="#" onMouseover="showmenu(event,linkset[0])" onMouseout="delayhidemenu()"><img src=your image you want to hover over.></a> </span></div> </div>
|
|
|
| |
|
DaPizzaMan
|
Feb 19 2014, 10:41 AM
Post #4
|
#TeamSupport
- Posts:
- 5,109
- Group:
- Support Team
- Member
- #386,619
- Joined:
- September 28, 2010
- I'm Browsing With
- Safari · Chrome
- My Board URL
- http://s4.zetaboards.com/zbThemes/index/
|
Do you still need this? Also, I don't know where on Broken Promises this "Hover Links" example can be found.
|
|
|
| |
|
Moonface
|
Mar 9 2014, 10:19 AM
Post #5
|
- Posts:
- 8,583
- Group:
- Support Team
- Member
- #133,038
- Joined:
- October 17, 2006
- I'm Browsing With
- Chrome
- My Board URL
- http://universalgaming.net
|
This request has gone a lengthy period of time without any new activity, therefore it is being marked as expired. This means that the request was typically too time-consuming or irritating for coders (who provide this service voluntarily in their free time) to complete.
Thank you.
|
|
|
| |
| 1 user reading this topic (1 Guest and 0 Anonymous)
|