No announcement yet.

any javascript pro's in the house ?

  • Filter
  • Time
  • Show
Clear All
new posts

  • any javascript pro's in the house ?

    I'm building a website - sort of stuck making the menu system...


    its still in its buidling stage obviously...

    if you take a look at the code you will find that I've used CSS to make the hover over images appear when you mouse over the menu below, issue is - I now need to make those menu options link off to some place, I've split the news item into two seperate images on the page to show you the mouseover parts. issue is the CSS will only pop up image above news, not two ?

    I dunno - can anyone help just make it work haha

  • #2
    You get any joy with it?

    So the menu balloon appears, with two items. Clicking either of the items goes off to the target correctly. What's missing? Is there supposed to be some kinda mouseover change for the sub-items?
    "Once upon a time we would obey in public, but in private we would be cynical; today, we announce cynicism, but in private we obey."


    • #3
      To get your images to redirect to other pages you could use a map on the image. With this you link coordinates [x1,y1,x2,y2] to a href and / or other javascript.

      image source

      <img src="pathtoimage" usemap="#mymap"/>

      map source

      <map name="mymap">
      <area shape="rect" coords="x1,y1,x2,y2" href="url 1 goes here"/>
      <area shape="rect" coords="x1,y1,x2,y2" href="url 2 goes here"/>

      I have never used this myself but my work's website uses it and should work. My example has the map defined within the php page but i can see no reason to not chase it out to your css.

      Hope this is what your after.

      Also your site does not work on Safari OSX


      • #4
        You have already got mouse events firing onmouseover and onmouseout, there's also a javascript mouse event called "onclick", you could place the a href in there. It's been a while since I have done it, you might need to write a document.location.href modifying function, something like.

        function NewLink(newLocation){
        document.location.href = newLocation
        // where newLocation is the page name that you want to link to.

        You could also do it inline, so something like.

        onclick="javascript: document.location.href = about.html;"> that should do it as well.

        Sometimes it's nicer to have the function sitting there even though it's not doing much, means that if you do decide to do something more with the onlick event in the future that you just need to modify the function rather than all the inline javascript.

        To call the function would be something like

        onclick="javascript: newLink("about.html");">

        If you need any more help, or want me to have a closer look at the code, drop me a PM, only too happy to help out.




        • #5
          Sorry about the late reply... I ended up figuring out how to do it using CSS... only issue is... IE6 won't support :hover on <span> ... only <a> ....


          shitting me off cos it works perfect in IE8 + FF...

          anyone got any ideas for redoing it ? I'd have it working with <A> if I didn't need to have the popup contain two images which link to different URLs.... sigh...

          help ?