I'm currently working on a timeline project where I have five tabs at the top of my page. Each tab represents a DIV container. In each DIV container, I have an image (a timeline) loaded with each image having the same height but various widths (each image is in excess of 10,000+ pixels). Each DIV is scrollable left/right to navigate the image.
Each image is setup as an image map and I'm using the qTip jquery framework to provide tooltips for various times on each timeline. The qTip framework displays the value of each Alt tag provided with each <area> tag on mouse over.
The coding for the image map is as follows:
<img src="myimage.jpg" width="10311" height="550" usemap="#map1" />
<area shape="rect" coords="578,36,591,516" href="#" alt="20:14" />
<area shape="rect" coords="687,36,703,517" href="#" alt="20:15" />
Is it possible to create a search box to be displayed on the page where the user can enter a time value and it searches the values of the ALT tags (which are time values)? I want to set it up so that when the user searches for a time value, it will search the ALT tags for that time and automatically jump to that portion of the image. Or is there an easier way to implement a simple search where a time value is entered and the image scrolls to that section of the image?