Image as a tooltip... Visit this website...... You will come to know w

[bhuvanasanthi]

<script type='text/javascript'>
$(window).load(function () {
$('area').each(function (e) {
var area = $(this),
alt = area.attr('id');
if (alt != null) {
area.mouseenter(function () {
var newImage = $('<img />');
newImage.attr('src', 'ReadImage.ashx?id=' + alt); // call handler with id
$('.display').append(newImage);

};
}
e.preventDefault();
});
});
</script>
<div class="display">
</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>


I am gettting image on mouseover, if i over the mouse on area id =1.
That id 1 will be passed to the ashx page through the script.
The ashx page returns my image from the database.
I am loading that image in the div display.

Now what i need is i have to display the image as a tooltip not in a div........


For example: Visit this following website.

http://visitmix.com/labs/glimmer/samples/tooltip.html

Can anybody suggest me a solution to do this?
I know there is an easy way to do this...... i have brought 60 percent. Now what i need is i have to get this image as a tooltip when i move the mouse over the area id =1..

Thanks

 

[BillyRayPreachersSon]

what i need is i have to display the image as a tooltip not in a div

There's no reason you cannot use the div to display the tooltip. Try styling is with an absolute position and give it some dimensions and a position and see what happens.

Hope this helps,

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

[blue]@[/blue] Twitter:

http://twitter.com/SleepyDrunkDan

The Out Atheism Campaign

 

[bhuvanasanthi]

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 (

http://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...