onClick (itmname) images show (itmpic)

[S.Cosmin]

Like the title said, i want to make something like, when you have the mouse on item (ex: AK47) to see a image...and when i take the mouse over the image to close.

Here is a print

Can someone help me to do this?

[Danny696]

Look for a (D)HTML tooltip, theres many on dynamicdrive.com

[S.Cosmin]

I trying for 3 hours but nothing :(

Can you give me more help? For example an example? :D

[runthis]

The basic idea you are looking for is this, for simplicity of reading this reply, the style is inline.

Demo: http://www.pure2012.com/testcolor.php

 

[noparse]
<script type="text/javascript">
function hint(id){
var z=document.getElementById(id);
if(z.style.display == 'none'){ 
	z.style.display='inline'; 
}else{
	z.style.display='none'; 
}
}
</script>
<a style="cursor:pointer;" onmouseover="hint('hello');" onmouseout="hint('hello');">Hover me?</a><br>
<div id="hello" style="display:none;">hello world</div>
[/noparse]

Edited September 18, 2011 by runthis

[mixmaster]

like this ? http://dynamicdrive.com/dynamicindex4/imagetooltip.htm

[S.Cosmin]

Thank you bouth, i have use mixmaster mod i done all but why cant see the image?

this is the code in js

tooltips[3]=["{$i['itmpic']}", "Bridge to somewhere.", {background:"white", font:"bold 12px Arial"}]

Will bi this the problem {$i['itmpic']} ? But how to fix...

[mixmaster]

Thank you bouth, i have use mixmaster mod i done all but why cant see the image?

this is the code in js

tooltips[3]=["{$i['itmpic']}", "Bridge to somewhere.", {background:"white", font:"bold 12px Arial"}]

Will bi this the problem {$i['itmpic']} ? But how to fix...

Did you download both the files and upload them to your server ?

[S.Cosmin]

Did you download both the files and upload them to your server ?

Yesm the problem is, i cant see the image, the rest work fine. Im not sure if {$i['itmpic']} works on JS or? Can fix?

[runthis]

I can install the Dynamic Drive script into your game for $10

[S.Cosmin]

Yesm the problem is, i cant see the image, the rest work fine. Im not sure if {$i['itmpic']} works on JS or? Can fix?

up..........................

[bineye]

Right, have you tried displaying {$i['itmpic']} just on your page, just outside your tooltip? If it displays correctly, then the problem is in the mouseover, if not, then the problem will be in your link/variable.

[S.Cosmin]

Outside works fine, i can see it.

[bineye]

tooltips[3]=["{$i['itmpic']}", "Bridge to somewhere.", {background:"white", font:"bold 12px Arial"}]

And is the bit above, the direct link to the image, ie the image isn't in a seperate images folder?

[S.Cosmin]

tooltips[3]=["{$i['itmpic']}", "Bridge to somewhere.", {background:"white", font:"bold 12px Arial"}]

And is the bit above, the direct link to the image, ie the image isn't in a seperate images folder?

What do you mean?

[bineye]

The bit I put in bold, will be the link to the image. If you store images in a folder, then the link would most likely need to be "IMAGE_FOLDER/{$i['itmpic']}"

[S.Cosmin]

same...i do what you say

tooltips[3]=["images/items/{$i['itmpic']}"]

ather ideeas?

[Lithium]

you are placing php inside js, you can't... try this way though not sure if it works as i don't see the rest of the code...

 

tooltips[3]=["images/items/<?php echo $i['itmpic']; ?>"]

[Danny696]

Maybe there printing it, so they can.

[S.Cosmin]

you are placing php inside js, you can't... try this way though not sure if it works as i don't see the rest of the code...

 

tooltips[3]=["images/items/<?php echo $i['itmpic']; ?>"]

What way (what code) i cant see nothing...

[gurpreet]

I can't get this to work either, I'm calling it like this in inventory:

print "<tr><td><a href='inventory.php#' rel='imgtip[0]'>[{$i['itmname']}]</a>";

And here's what I got in the js file:

tooltips[0]=["images/$i['image']", "$i['itmname']", {background:"#FFFFFF", color:"black", border:"5px ridge darkblue"}]

Am I doing something wrong there? I tried Lithium's method too and that didn't work

[Lithium]

JavaScript cannot directly execute serverside code, since it runs on the client, which you seem to have a grasp on already. What AJAX (just a fancy acronym for a variety of techniques) does is simple. The script indirectly executes serverside code by requesting a new page, preferably asynchronously and in the background so the client won't have to wait for a page reload etc.

Since the server must know what data it should send back, you need to send some kind of data/instructions. You can either append it to the url as a querystring (a GET request) or make a POST request, like forms do. The instruction telling the server what to do could just as well had been the name of the requested document or placed into a custom header (not guaranteed to reach the server), but grabbing GET or POST data serverside is a bit more convenient.

The reply from the server could be anything from partial (X)HTML, which could be inserted somewhere on the page, or some other form of data which the clientside script knows how to parse. XML is often used for this, which is why it got called Asynchronous JavaScript And XML.

[gurpreet]

So basically get the image and any other info using AJAX and then add a mouseover on top of the item name in the inventory page? Would a new page be required for the AJAX or could it be added to the top of the inventory page?