PDA

View Full Version : fix image position using tooltip


chrissia7890
08-17-2009, 02:45 PM
I was trying to fix the position of an image using tooltip function, it is not on a fix position that i wanted. the image pops out at different position depending on where i point the cusor.

How to go about in getting a fixed position using the tooltip function?

Can anyone help me ???

Thank you

DWcourse
08-17-2009, 08:01 PM
DW's Spry tooltips pop up relative to the cursor not the tip itself you'd probably need to edit the javascript file to it work the way you want.

chrissia7890
08-18-2009, 01:07 AM
hi DWcourse, thanks for the information, would appreciate if you can spare some time to guide me along editing the JS. i found the offset range but was could not determine where i could change to hold the position.

Thank you in advance.

DWcourse
08-18-2009, 01:49 AM
Sorry, I'm no help there!

Or maybe someone can point you to another solution.

edbr
08-18-2009, 02:08 AM
what are you actually wanting? you want a image to pop up when you hover over something?

chrissia7890
08-18-2009, 06:07 AM
Hi ED,

I wanted to fix the position of the image when the cusor hover over a sentence. currently, the DW tooltip. the position of the image moves depending on the where i hover the cusor.

an example is in this link : http://www.prostatcorp.com/Detail.asp?id=8 where the image is fix in position in the box.

Thanks,

edbr
08-18-2009, 07:17 AM
actually im not seeing any 'tooltip' on your page so im struggling a bit.
if your after showing an image when you hover then you could use css class that on hover produces an image or text

chrissia7890
08-18-2009, 08:43 AM
oh, i forgot to include, if you go to the link, under the tab " what's included" you will see it. The cusor points to the equipments and the picture comes out in a fix position.

edbr
08-18-2009, 09:16 AM
still not
<td width="26%" class="AlignementMiddleCenter"><a href="javascript:void(0);" onclick="toggleOn('content');" class="LinkArialBlack_UndHover_12">What's Included</a></td>
that's basically a show hide .
can anyone else see this?

chrissia7890
08-18-2009, 04:59 PM
Hi Ed,

it ok, Thank for the help. i will think of some other way to enhance it.

edbr
08-19-2009, 01:01 AM
i use a css class for this , have a look at www.concord-bali-villas.com and hover over the villa names in the bottom link. this method could be used for what i think you want
actually a work in progress is www.concord-bali-villas.com/index3.php is the same principle different settings. If it is ill post the class, i did a couple of weeks ago also seach tooltip

chrissia7890
08-19-2009, 12:28 PM
Hi Ed,

That is what i needed, a fix position on on the image instead of running image when the cusor moves. I am a beginner in DW, is it difficult to do this?

Thanks for your help.

edbr
08-20-2009, 12:46 AM
the class is
a.tooltip:hover {background:#ffffff; text-decoration:none;} /*BG color is a must for IE6*/
a.tooltip span {display:none; padding:2px 3px; margin-left:-50px; margin-top:-60px; width:100px;}//adjust for position here
a.tooltip:hover span{display:inline; position:absolute; border:1px solid #cccccc; background:#ffffff; color:#6c6c6c;}

usage
;?><span><img src="images/myimage.gif>" /></span></a>]
i use # but of course this can be a link to a specific page

chrissia7890
08-20-2009, 12:48 PM
Hi Ed,

Correct me if I am wrong, i setup a css style class. and put the code in this class.

Than, where do i put the usage mentioned below?

chrissia7890
08-20-2009, 01:30 PM
i notice that you are using php, can this be apply to html?

edbr
08-21-2009, 01:55 AM
no prob sorry i was rushing as usual and posted part of my used code as i am getting the images dynamically. yes just hard code
<a class="tooltip" #">Link<span><img src="images/myimage.gif>"

chrissia7890
08-22-2009, 02:10 AM
Hi Ed,

This is actually what i wanted. Thanks Bro...:)

chrissia7890
09-29-2009, 01:58 AM
Hi Ed,

I have another issue and i think you are the right person to help me. I saw in your site that you are able to display all the pictures in a fix position be it where your mouse moves.


Can you show me how?

Thank you

edbr
09-29-2009, 02:49 AM
margin-left:-50px; margin-top:-60px; that is the element that positions it relative to the link

chrissia7890
09-29-2009, 02:57 AM
Hi Ed,

The problem is i have different links at different place within the page. the pop out is relative to the link.

Please see your link http://www.concord-bali-villas.com/villa_pantai-biru.html where you have six pictures at the bottom right and the pop out is all in the same place. How do you do this?

Thanks

edbr
09-29-2009, 03:35 AM
ah right thats a whole different class, look at gallery.css.

chrissia7890
09-29-2009, 01:21 PM
i am sorry if i ask. where is this galary.css. could not find it in this forum. please assist me.

Thank you.

edbr
09-30-2009, 12:43 AM
no on my villa site i meant

chrissia7890
10-10-2009, 07:17 AM
Hi edbr,

Sorry to trouble you but how do i get the galary.css. i look around your site but could not find it.

Thanks

edbr
10-10-2009, 08:30 AM
www.concord-bali-villas.com/styles/gallery.css (http://www.concord-bali-villas.com/gallery.css)

chrissia7890
10-11-2009, 01:41 PM
Hi,

I could not open the link, Could there be somethign wrong ?

Thanks

domedia
10-12-2009, 12:03 AM
View the source of his website to find the path, it's all public information ;)

chrissia7890
10-12-2009, 10:10 AM
Hi Domedia,

I am still lost to how to go about doing it. i view the source file and I could only see.

<link href="style/gallery.css" rel="stylesheet" type="text/css" />

Can you guide me to this.

Thanks

edbr
10-12-2009, 10:24 AM
www.concord-bali-villas.com/style/gallery.css (http://www.concord-bali-villas.com/gallery.css)

chrissia7890
10-12-2009, 12:45 PM
i am really lost, read for hours but could not figure out how this can be done. haiz.. Guess i have lot to learn on this....

Anyway, Thanks all for your help...

Regards,