[web] Possible to draw a circle around some text?
Author
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
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.<br><br>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.<br><br>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.<br><br>Mark
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.<br><br>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.<br><br>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.<br><br>Mark
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).
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).
Author
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
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
This topic is closed to new replies.
Advertisement
Popular Topics
Advertisement
