Hello everyone,
I’m currently building a site which is all HTML and CSS and came across this one function that allows images as tool tips. [URL=”http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery”]link here
Now I’m ‘alright’ with HTML and CSS but I am completely lost with javascript since I have not used it. I’ve spent all day reading up on javascript but I cant seem to find any relevant information or at least information that I think would work in this manner.
Here is the script I am using..
[CODE]
/*
* Image preview script
* powered by jQuery (http://www.jquery.com)
*
* written by Alen Grakalic (http://cssglobe.com)
*
* for more info visit http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
*
*/
this.imagePreview = function(){
/* CONFIG */
xOffset = 200;
yOffset = 20;
// these 2 variable determine popup’s distance from the cursor
// you might want to adjust to get the right result
/* END CONFIG */
$(“a.preview”).hover(function(e){
this.t = this.title;
this.title = “”;
var c = (this.t != “”) ? “<br/>” + this.t : “”;
$(“body”).append(“<p id=’preview’><img src='”+ this.href +”‘ alt=’Image preview’ />”+ c +”</p>”);
$(“#preview”)
.css(“top”,(e.pageY – xOffset) + “px”)
.css(“left”,(e.pageX + yOffset) + “px”)
.fadeIn(“fast”);
},
function(){
this.title = this.t;
$(“#preview”).remove();
});
$(“a.preview”).mousemove(function(e){
$(“#preview”)
.css(“top”,(e.pageY – xOffset) + “px”)
.css(“left”,(e.pageX + yOffset) + “px”);
});
};
// starting the script on page load
$(document).ready(function(){
imagePreview();
});
As it stands right now it only looks in the directory that the HTML file is in for any pictures it requires. All the images for this website are in there separate folder called ‘img’ though since I do not plan to have all HTML sheets, pictures etc.. in the same folder.
So I am trying to figure how to make + this.href + look into <img src=”img/HERE”>
All the information I can find on ‘this.href’ is pretty extensive and all refers to linking but not going into a directory.
Since I am rambling and repeating myself I will stop here. Hopefully some of this made sense and any help is greatly appreciated.
Thank you