0

I was browsing other user questions a few minutes ago.. and it led me to trying to change the hover color of the hyperlink on mouse over of my image map.

Any idea how I might accomplish this for the 1 hyperlink I have up?

http://www.urlgone.com/d7ccf8/

Jeff
  • 19
  • 1
  • 3

1 Answers1

0

You're using jquery as i can see. So do something like that:

<script>
    $(document).ready(function() {
        $("area[shape='poly']").mouseover(function() {
            var id = $(this).attr('id');
            $('a.staffs').removeClass('active'); //make other link not ative
            $('a.staff-' + id).addClass('active');
        }).mouseout(function() {
            $('a.staffs').removeClass('active');
        });
    });
</script>

And CSS (you have to change it to your style):

<style>
    .active {
        color:red;
        text-decoration:underline;  
    }
</style>
kpotehin
  • 1,025
  • 12
  • 21
  • Hmm... I'm only proficient at php so the obvious part to you is a bit confusing to me. The world of jquery is foreign to me. The map script is a 3rd party script so I simply inserted it. I do appreciate the answer though. If jquery is the only solution, I may have to venture down that road soon. – Jeff Apr 12 '12 at 19:00
  • Step by step tutorial: 1). You have to add `class="staffs"` to each link, e.g. `Alabama`. I hope you generate it in php (loop). 2). You also have to add an unique class to each of it. For example, for Alabama it will be `staff-A50`. (`Alabama`) For Colorado `staff-A31` etc. 3). Now just paste the code from my answer right before `body` tag. That's it! – kpotehin Apr 12 '12 at 19:12
  • Try now. Replace srcipt and add css. That's will work, i've checked it on your site. And one more: you insert the code twice. There's no need to do it. And you have a link only for Alabama, so it will be work only with it. When you create link for each state it will automatically works. – kpotehin Apr 12 '12 at 19:44
  • You sir.. are brilliant. :) Thanks so much. You made my day. I really appreciate the extra mile. Not many people online are willing to do that. Many thanks. – Jeff Apr 12 '12 at 20:04
  • (I guess I can't vote your answer up because it's my first question and I need 15 rep.. but I'll do it later when I build it up.) – Jeff Apr 12 '12 at 20:05
  • 1 last quick follow-up. How would I now style the hyperlink to look different in a default state (remove the underline and change the color) before the hover? – Jeff Apr 12 '12 at 20:52
  • Add this to the style block: `.staffs { color:black; text-decoration:none }` – kpotehin Apr 12 '12 at 21:42