Javascript image tooltip (need help with image relative path syntax)
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 that media type when it is rolled over. I have everything in place, but the images will not show. I am not very familiar with Javascript or PHP, 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"];"
HELP!!! :) I know there is any easy answer for this.
To get the path to images in your theme, you use the php function $this->getThemePath().
The problem is you can only do this in PHP files, not javascript files. To make php data available to javascript, you must output a javascript variable in your theme template file, for example:
Now your javascript should have access to that tooltip_image_path variable. If, for example, that little snippet of code you pasted is how it gets the image paths, you would change that to:
(not sure what that extra curly brace is -- please use my code above as a possible example showing how to use the variable, not as a directly-pasteable solution).
Hope that helps.
The problem is you can only do this in PHP files, not javascript files. To make php data available to javascript, you must output a javascript variable in your theme template file, for example:
<script type="text/javascript"> var tooltip_image_path = '<?php echo $this->getThemePath(); ?>/picsamddpcs/'; </script>
Now your javascript should have access to that tooltip_image_path variable. If, for example, that little snippet of code you pasted is how it gets the image paths, you would change that to:
tooltips[0]=[tootip_image_path + 'tape/1inch.JPG'];
(not sure what that extra curly brace is -- please use my code above as a possible example showing how to use the variable, not as a directly-pasteable solution).
Hope that helps.
Thank You! That is exactly the answer I was looking for. I will give it a shot. Regardless, I was unaware of the issue with PHP and Javascript and appreciate the info very much!
James
James
