Javascript image tooltip (need help with image path I think)
Permalink
I created a static site a while back that I am converting. One function is a transparent/rollover/img tooltip menu of media types that displays a thumbnail of the selected media type when it is rolled over. Right now, the thumbnail images will not display. I don't understand dynamic file paths very well. I am not very familiar with Javascript or PHP either, so this has been a learning process for me. Here is the static site to demonstrate how it should be working.http://www.mediaassetpreservation.com...... . Go to the right column and hover over the red media formats button and a dropdown will display. If you then hover over a media type, a thumbnail displays above it. Here is the concrete5 version I am working on... set up the same way.http://www.barkingtunawebdesign.com/map...... . FYI... the images are stored, for the audio files for instance, in the theme under picsamddpcs/audio/"some image file..." Below, is a sample of one of the links in the Javascript file I am using. I suspect that the issue is in the syntax of the link to the image file as it was written as a direct path originally for a static website, right? They look like this:
"{tooltips[0]=["picsamddpcs/tape/1inch.JPG"];"
"{tooltips[0]=["picsamddpcs/tape/1inch.JPG"];"
Create "js" folder in your root directory and place "ddimgtooltip.css"
& "ddimgtooltip.js"
in there. (you can download them, use google to find these files or copy and paste them to your favourite EDITOR, then save it as JS, javascript file)
After, you go to your Concrete5 site, log-in and edit your page, add content block, using HTML view, add this:
Inside "ddimgtooltip.js" - make sure that path to your image file is correct, in this example, I've put my image in: root directory/images
That's it really, try it, and let us know how you getting on...
Gosh.