8 Replies - 576 Views - Last Post: 30 October 2013 - 02:21 PM

#1 d.c  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 18
  • Joined: 06-September 13

Anchor question

Posted 30 October 2013 - 01:39 PM

Hello, I have designed a circular logo (logo in a shape of a circle) and I have surrounded the img tag with an a tag.
I am using a png image with transparent corners around the circle. Is there any way I could make the cursor ignore the transparent space around the circle so that the cursor would stay as an arrow on the corners and change into a pointer only when on the circle's space?

Thank you.
Is This A Good Question/Topic? 0
  • +

Replies To: Anchor question

#2 modi123_1  Icon User is online

  • Suitor #2
  • member icon



Reputation: 9426
  • View blog
  • Posts: 35,422
  • Joined: 12-June 08

Re: Anchor question

Posted 30 October 2013 - 01:43 PM

So like an 'image map', but circular or irregular polygon-ish?

http://www.w3schools...ags/tag_map.asp
Was This Post Helpful? 1
  • +
  • -

#3 d.c  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 18
  • Joined: 06-September 13

Re: Anchor question

Posted 30 October 2013 - 01:54 PM

<img>Posted Image</img>

Even though the red corners are transparent the cursor changes to a pointer when pointed at their space, I want the cursor to ignore that space

The thing is that I can style the anchor points in rectangular shapes by height and width and when Im using a cicle the anchor still acts like a cube underneath the image

This post has been edited by modi123_1: 30 October 2013 - 01:55 PM
Reason for edit:: fixed image tags

Was This Post Helpful? 0
  • +
  • -

#4 modi123_1  Icon User is online

  • Suitor #2
  • member icon



Reputation: 9426
  • View blog
  • Posts: 35,422
  • Joined: 12-June 08

Re: Anchor question

Posted 30 October 2013 - 01:56 PM

Again.. read that link.. the map can be made in a circle.. and it can be made to be a link.
Was This Post Helpful? 2
  • +
  • -

#5 d.c  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 18
  • Joined: 06-September 13

Re: Anchor question

Posted 30 October 2013 - 01:59 PM

Yeah, thats exactly what I needed, let me try to apply that technique. thank you.
Was This Post Helpful? 0
  • +
  • -

#6 d.c  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 18
  • Joined: 06-September 13

Re: Anchor question

Posted 30 October 2013 - 02:07 PM

I am having trouble applying the map into my 300x300 circle image

<div class="logo">
            <img id="base" usemap="#logomap" alt="#" src="img/base2.png">
            </div><!-- logo end-->
            
   <map name="logomap">
   <area shape="circle" coords="90,58,3" alt="#" href="#">
   </map>



I am using the coords from the w3schools and I am not sure how to change those to my need.
Was This Post Helpful? 0
  • +
  • -

#7 modi123_1  Icon User is online

  • Suitor #2
  • member icon



Reputation: 9426
  • View blog
  • Posts: 35,422
  • Joined: 12-June 08

Re: Anchor question

Posted 30 October 2013 - 02:10 PM

Open up your image in paint, see where the circle starts, and the radius.

http://www.w3schools...area_coords.asp

.. or just look up 'image make creator' and there are plenty of places online that'll help you make the right size for it.
Was This Post Helpful? 1
  • +
  • -

#8 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3643
  • View blog
  • Posts: 12,639
  • Joined: 12-December 12

Re: Anchor question

Posted 30 October 2013 - 02:16 PM

You haven't spent much time on this :whistling: but there are online tools like this one that that can help build image maps. Shouldn't be too difficult though, with just a circle.

Off topic: I understood that image maps are supposed to be deprecated, but I don't see how this could be achieved with just CSS(3). Circles can be created with just css, but if we attempt to wrap them in an a-tag then the link will still extend outside of the border-radius.

I'll stick with image maps for now ;)

Edited: On digging a little deeper, image maps are not deprecated.

This post has been edited by andrewsw: 30 October 2013 - 02:30 PM

Was This Post Helpful? 1
  • +
  • -

#9 d.c  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 18
  • Joined: 06-September 13

Re: Anchor question

Posted 30 October 2013 - 02:21 PM

that online tool is perfect, as I didnt know how to read the coords from paint, thanks you two.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1