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"];"

1 Attachment

barkingtuna
 
mozalan replied on at Permalink Reply
You can put javascript inside your HEADER file of your theme, like:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="/js/ddimgtooltip.css" />
<script type="text/javascript" src="/js/ddimgtooltip.js">
</script>


Create "js" folder in your root directory and place "ddimgtooltip.css"
.ddimgtooltip{
box-shadow: 3px 3px 5px #818181; /*shadow for CSS3 capable browsers.*/
-webkit-box-shadow: 3px 3px 5px #818181;
-moz-box-shadow: 3px 3px 5px #818181;
display:none;
position:absolute;
border:1px solid black;
background:white;
color: black;
z-index:2000;
padding: 4px;
}


& "ddimgtooltip.js"

var ddimgtooltip={
   tiparray:function(){
      var tooltips=[]
      //define each tooltip below: tooltip[inc]=['path_to_image', 'optional desc', optional_CSS_object]
      //For desc parameter, backslash any special characters inside your text such as apotrophes ('). Example: "I\'m the king of the world"
      //For CSS object, follow the syntax: {property1:"cssvalue1", property2:"cssvalue2", etc}
      tooltips[1]=["images/1.jpg"]
      return tooltips //do not remove/change this line
   }(),
   tooltipoffsets: [10, -10], //additional x and y offset from mouse cursor for tooltips
   //***** NO NEED TO EDIT BEYOND HERE
   tipprefix: 'imgtip', //tooltip ID prefixes
   createtip:function($, tipid, tipinfo){
      if ($('#'+tipid).length==0){ //if this tooltip doesn't exist yet
         return $('<div id="' + tipid + '" class="ddimgtooltip" />').html(


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:

<p><a rel="imgtip[1]">TESTING</a></p>


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

tooltips[1]=["/images/1.jpg"]


That's it really, try it, and let us know how you getting on...

Gosh.