Jump to content
  • Advertisement
Sign in to follow this  
johnnyBravo

[web] Possible to draw a circle around some text?

This topic is 5010 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

Hi, I was wondering if it was possible to draw a circle around some text, so users can click on a some specific words on my web pages and they would be circled/uncircled, sorta like a checkbox, but with text. I thought maybe I could use div tags and some kind of input or link object, but without actually using an image with a circle on it, I was wondering if its possible to actually draw a circle around the text, eg (circle one), abc/defghijk So the circle would have to be flexible. ...well its more of an oval shape actually. Thanks

Share this post


Link to post
Share on other sites
Advertisement
You could potentially do it using a graphic overlay transparent image. Put this in an absolutely positioned element (div probably), and move it over the item you want to circle. Then make it visible.

This could of course be done fairly easily in javascript.

However, you're going to need to make every circlable object its own element (span or whatever), so you can find its coordinates in javascript. That's ok though, as you'd have to do that anyway to capture onclick events etc.

Consider whether there's another more sensible design you can use instead, from your designers. Sounds like a very tricky thing for very little benefit.

You could, for instance, instead use a checkbox and write a CSS stylesheet which causes it (or its label) to be circled when the box is checked. Or some script or something.

Mark

Share this post


Link to post
Share on other sites
Check out This Tutorial to learn how to dynamically change CSS styles on a page with javascript. Source: GOOGLE Time to find: 5 SECONDS

Using this, you can create two classes in your CSS: one that shows when the text is unselected, the other after it's clicked. Whatever text you'd want users to be able to select would have to have that first class applied to it. I suppose you could make a background image that looks like a circle and use that in the transition, but maybe you can settle for something simpler (taking less time to look right no matter what text you decide to make selectable).

Share this post


Link to post
Share on other sites
i see, thanks

I guess something could be done with the css, but i'll have a look into it more when I got more free time.

I thought it might of been possible using javascript or something to draw circles, but then even if i could i would have to work out how get right the positions etc around the writing, which would be too much hassle i guess....

SO anyway I just went with pictures of text and a circle around it, so when the font on the page is changed, im going to have to change those images, well theres only 4 so far, hopefully that'll be all.

Its for an online form to be printed off, and used as a normal form, thats why I need the graphic of things been circled.

Thanks all

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

We are the game development community.

Whether you are an indie, hobbyist, AAA developer, or just trying to learn, GameDev.net is the place for you to learn, share, and connect with the games industry. Learn more About Us or sign up!

Sign me up!