CODEWITHSUNDEEP
phpjquery
hatchetaxesaw
hatchetaxesaw

Reputation: 183

Create dynamic image in PHP

So, here's what I'm attempting to do:

I have an image of a target, and I'd like to dynamically place the location of each arrow on the target. I'd also like to have the shot location be referenceable with a dynamically generated tooltip (JQuery?) so that when the user hovers over the shot location, they can see what the score for that shot is.

So, in the image shown here, the "target" is a standard image and the numbers (in white) are added based upon data in my database and indicate the shot sequence and approximate location of that shot. I'm storing the location in two parts: score and clock position. So, for the second shot, the score is "5" and the clock position is 14:30 (approximately!) For the third shot, the score is "2" and the clock position is 16:15.

What's my best approach? I think I can use the PHP GD libraries to get the shot sequence number added to the base image, but I'm not sure how to get the hover/tooltip to work in conjunction with this.

target with shot locations

Update: Mission accomplished: here's the semi-finished product:

enter image description here

Upvotes: 3

Views: 181

Answers (1)

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324620

If you want JavaScript to be able to interact with it, you might be better just having a <div> with the target as a background-image, then placing more <div>s with position:absolute in the right places, applying the tooltips to these. Much simpler than generating the image in PHP and then implementing tooltips over certain areas.

Upvotes: 2

Related Questions