Hi Experts,
<script type='text/javascript'>
$(window).load(function () {
$('area').each(function () {
var area = $(this),
alt = area.attr('id');
if (alt != null) {
area.mouseenter(function () {
var result = "Search_CS.ashx?q=" + alt;
var newImage = $('<img />');
newImage.attr('src', 'ReadImage.ashx?id=' + alt);
var abc = '#dhtmltooltip'
$(abc).append(newImage);
ddrivetip(abc, 300);
}).mouseleave(function () {
$('#dhtmltooltip').html('');
hideddrivetip();
});
}
});
});
</script>
<div class="dhtmltooltip">
</div>
<img src="3rd_Floor_screen-size.jpg" width="1372" height="906" border="0" alt="" usemap="#Map" /></div>
<map name="Map" id="Map">
<area id="1" alt="1" class="tooltip" shape="rect" coords="28, 87, 93, 181" href="#"/>
<area id="2" alt="2" class="tooltip" shape="rect" coords="95, 91, 172, 158" href="#"/>
<area id="3" alt="3" class="tooltip" shape="rect" coords="175, 90, 225, 157" href="#"/>
</map>
<script type="text/javascript">
/***********************************************
* Cool DHTML tooltip script- © Dynamic Drive DHTML code library (
www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at
http://www.dynamicdrive.com/ for full source code
***********************************************/
var offsetxpoint = -60 //Customize x offset of tooltip
var offsetypoint = 20 //Customize y offset of tooltip
var ie = document.all
var ns6 = document.getElementById && !document.all
var enabletip = false
if (ie || ns6)
var tipobj = document.all ? document.all["dhtmltooltip"] : document.getElementById ? document.getElementById("dhtmltooltip") : ""
function ietruebody() {
return (document.compatMode && document.compatMode != "BackCompat") ? document.documentElement : document.body
}
function ddrivetip(thetext, thecolor, thewidth) {
if (ns6 || ie) {
if (typeof thewidth != "undefined") tipobj.style.width = thewidth + "px"
if (typeof thecolor != "undefined" && thecolor != "") tipobj.style.backgroundColor = thecolor
/*tipobj.innerHTML = thetext*/
// var hij = tipobj.innerHTML;
// document.getElementById("demo").setAttribute("value",hij);
enabletip = true
return false
}
}
function positiontip(e) {
if (enabletip) {
var curX = (ns6) ? e.pageX : event.clientX + ietruebody().scrollLeft;
var curY = (ns6) ? e.pageY : event.clientY + ietruebody().scrollTop;
//Find out how close the mouse is to the corner of the window
var rightedge = ie && !window.opera ? ietruebody().clientWidth - event.clientX - offsetxpoint : window.innerWidth - e.clientX - offsetxpoint - 20
var bottomedge = ie && !window.opera ? ietruebody().clientHeight - event.clientY - offsetypoint : window.innerHeight - e.clientY - offsetypoint - 20
var leftedge = (offsetxpoint < 0) ? offsetxpoint * (-1) : -1000
//if the horizontal distance isn't enough to accomodate the width of the context menu
if (rightedge < tipobj.offsetWidth)
//move the horizontal position of the menu to the left by it's width
tipobj.style.left = ie ? ietruebody().scrollLeft + event.clientX - tipobj.offsetWidth + "px" : window.pageXOffset + e.clientX - tipobj.offsetWidth + "px"
else if (curX < leftedge)
tipobj.style.left = "5px"
else
//position the horizontal position of the menu where the mouse is positioned
tipobj.style.left = curX + offsetxpoint + "px"
//same concept with the vertical position
if (bottomedge < tipobj.offsetHeight)
tipobj.style.top = ie ? ietruebody().scrollTop + event.clientY - tipobj.offsetHeight - offsetypoint + "px" : window.pageYOffset + e.clientY - tipobj.offsetHeight - offsetypoint + "px"
else
tipobj.style.top = curY + offsetypoint + "px"
tipobj.style.visibility = "visible"
}
}
function hideddrivetip() {
if (ns6 || ie) {
enabletip = false
tipobj.style.visibility = "hidden"
tipobj.style.left = "-1000px"
tipobj.style.backgroundColor = ''
tipobj.style.width = ''
}
}
document.onmousemove = positiontip
</script>
<div id="dhtmltooltip">
</div>
In this script i can get text if i comment $(abc).append(newImage); this line in a tooltip.
i can get image if i comment ddrivetip(abc, 300); this line in a tooltip.
How to combine this. I have to get both the image and text in a tooltip.
I should not comment this.
If i didnt comment any line. i am not getting image . i am getting image as a text object.
What i have to do now.
Please give me a solution to complete this......
These are my scripts ddrivetip in the first post calls this script.
I dont know what i have to do now.....
I am getting both the image and a text as a tooltip.
But not at the same time.
I have to combine both of this.....
Can you give me a solution...
Talk To Other Members
Read More Threads Like This One