pop up window with Images & Description Details

  • 1
  • Question
  • Updated 8 years ago
  • Answered
I am trying to add the pop up window with Images & Description Details features on mysite. I did a search and found the link below:

http://www.dynamicdrive.com/dynamicin...

I am new to website. I have C&P the code from step1 and than it tell me to download the css and js file. What do I do with these to file?

Also, in the sample they use link1, link2, link3. I would like to use images instead of words. How do I do that? If someone can copy me their script from there HTML widget, it will be great.
Photo of johnsonfung29

johnsonfung29

  • 5 Posts
  • 0 Reply Likes
  • lost

Posted 8 years ago

  • 1
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hello!

After you downloaded them you need to host them. You wont be able to do this in your file manager unless you have Yola Silver.

But instead of putting them in seperate files lets just put the JavaScript right embedded in your page. To do this, cpy and paste this code into an HTML widget at the very top of your page:

<script type="text/javascript">
/* Image w/ description tooltip v2.0
* Created: April 23rd, 2010. This notice must stay intact for usage
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code
*/

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}

/*THIS IS WHERE YOU ADD YOUR IMAGES: KEEP ADDING TO THE PATTERN TO ADD MORE IMAGES, JUST COPY ONE LINE AND PASTE IT AND CHANGE THE NUMBER IN THE BRACKETS [ ] AND THEN CHANGE STUFF TO WHAT U WANT*/

tooltips[0]=["red_balloon.gif", "Here is a red balloon<br /> on a white background", {background:"#FFFFFF", color:"black", border:"5px ridge darkblue"}]
tooltips[1]=["duck2.gif", "Here is a duck on a light blue background.", {background:"#DDECFF", width:"200px"}]
tooltips[2]=["../dynamicindex14/winter.jpg"]
tooltips[3]=["../dynamicindex17/bridge.gif", "Bridge to somewhere.", {background:"white", font:"bold 12px Arial"}]

return tooltips //do not remove/change this line
}(),

tooltipoffsets: [20, -30], //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(
'<div style="text-align:center"><img src="' + tipinfo[0] + '" /></div>'
+ ((tipinfo[1])? '<div style="text-align:left; margin-top:5px">'+tipinfo[1]+'</div>' : '')
)
.css(tipinfo[2] || {})
.appendTo(document.body)
}
return null
},

positiontooltip:function($, $tooltip, e){
var x=e.pageX+this.tooltipoffsets[0], y=e.pageY+this.tooltipoffsets[1]
var tipw=$tooltip.outerWidth(), tiph=$tooltip.outerHeight(),
x=(x+tipw>$(document).scrollLeft()+$(window).width())? x-tipw-(ddimgtooltip.tooltipoffsets[0]*2) : x
y=(y+tiph>$(document).scrollTop()+$(window).height())? $(document).scrollTop()+$(window).height()-tiph-10 : y
$tooltip.css({left:x, top:y})
},

showbox:function($, $tooltip, e){
$tooltip.show()
this.positiontooltip($, $tooltip, e)
},

hidebox:function($, $tooltip){
$tooltip.hide()
},

init:function(targetselector){
jQuery(document).ready(function($){
var tiparray=ddimgtooltip.tiparray
var $targets=$(targetselector)
if ($targets.length==0)
return
var tipids=[]
$targets.each(function(){
var $target=$(this)
$target.attr('rel').match(/\[(\d+)\]/) //match d of attribute rel="imgtip[d]"
var tipsuffix=parseInt(RegExp.$1) //get d as integer
var tipid=this._tipid=ddimgtooltip.tipprefix+tipsuffix //construct this tip's ID value and remember it
var $tooltip=ddimgtooltip.createtip($, tipid, tiparray[tipsuffix])
$target.mouseenter(function(e){
var $tooltip=$("#"+this._tipid)
ddimgtooltip.showbox($, $tooltip, e)
})
$target.mouseleave(function(e){
var $tooltip=$("#"+this._tipid)
ddimgtooltip.hidebox($, $tooltip)
})
$target.mousemove(function(e){
var $tooltip=$("#"+this._tipid)
ddimgtooltip.positiontooltip($, $tooltip, e)
})
if ($tooltip){ //add mouseenter to this tooltip (only if event hasn't already been added)
$tooltip.mouseenter(function(){
ddimgtooltip.hidebox($, $(this))
})
}
})

}) //end dom ready
}
}

//ddimgtooltip.init("targetElementSelector")
ddimgtooltip.init("*[rel^=imgtip]")
&lt;/script>

&lt;style type="text/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;
}
&lt;/style>

Now you'll need to add in your images to th array at the top of the code.

To add done just follow the pattern. You need to put the URL to the images.

But this is quite hard for a begging (if you are) so I will help you out. Just tell me the URL to each of your images and the name of them and then I will put in the images for you.

Actually just upload the images to this forum in one reply. Keep clicking add an image and put a space in between them by uploading an image and then pushing enter twice and then uploading it again, etc.

It will appear as all HTML but when you post the reply it will be images.

If any of this confuses you let me know.

I will help you out with anything you need.

Hope this helps.

Nathan
Photo of johnsonfung29

johnsonfung29

  • 5 Posts
  • 0 Reply Likes
Thanks for the help. I do have the yola silver account. How do I do that than?
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Ok, you can then host them on your site but it is still going to be hard so I suggest you just putt hat HTML code on your page instead because you have to edit the file and stuff and it is hard.

So just upload your images on this thread. Just clcik the "Add an image" and choose your file and then click upload. It will add a code to the reply and it may not look like an image but when you post the reply it will be an image.

If you upload them I can give you another code that is all set to go without editing anything....

Nathan
Photo of Brianna

Brianna

  • 2045 Posts
  • 92 Reply Likes
Thanks for all of the help, Nathan!
Photo of johnsonfung29

johnsonfung29

  • 5 Posts
  • 0 Reply Likes
Ok. I will upload the images when I get home.

tks
Photo of johnsonfung29

johnsonfung29

  • 5 Posts
  • 0 Reply Likes
Here are the images from my Mac


Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Ok thanks a lot for posting the images! I will integrate them into the code and the post it here for you! Then all you will have to do is copy the code and thats it! :)

Sincerely,
Nathan
Photo of johnsonfung29

johnsonfung29

  • 5 Posts
  • 0 Reply Likes
Ok. Will wait for the good news!