MouseOver write text/PHP & MySQL

[djkdra]

Hello, i need some help to create a function that both extracts the database info, and writes it... i think JS whould be the real thing to use, but as it must have some PHP and MySQL in it, i thought that the PHP forum was the right place.Heres my image maps

 <div class="content"> <div align="center"><img src="bybilder/byen.gif" width="646" height="596" border="0" usemap="#Map" name="altimg">		<map name="Map" id="Map">		  <area shape="poly" coords="35,284" href="#" />		  <area shape="poly" coords="223,592,219,581,225,563,186,518,165,526,159,526,142,509,124,509,110,503,94,492,81,474,51,457,47,447,27,428,4,437,2,456,2,594" href="#" alt="Breakdown Streetz" onmouseover="on('image1');" onmouseout="off('origimage')">		  <area shape="poly" coords="582,592,577,586,573,572,561,550,561,528,508,457,493,448,482,442,476,435,451,432,441,428,274,337,265,340,254,341,224,340,189,351,169,352,151,353,137,358,131,369,132,380,136,392,144,405,154,423,162,446,169,467,177,480,183,500,187,510,229,559,230,567,226,578,227,585,232,592" href="#" alt="Streetz of Battle"  onmouseover="on('image2');" onmouseout="off('origimage')">		  <area shape="poly" coords="529,409,520,421,507,429,487,432,473,430,468,419,475,399,472,395,448,386,442,356,445,353,427,341,434,326,428,312,428,300,436,299,472,338,524,374" href="#" alt="Pimp Streetz"   onmouseover="on('image5');" onmouseout="off('origimage')">		  <area shape="poly" coords="435,293,380,309,375,300,328,299,235,269,244,222,350,244,374,238,411,254,417,260,437,280,434,280" href="#" alt="Streetz of crime"   onmouseover="on('image6');" onmouseout="off('origimage')">		  <area shape="poly" coords="240,216,167,202,116,214,92,215,65,220,33,218,2,209,4,107,167,150,221,156,240,168,231,182,246,193" href="#" alt="Pusher Streetz"  onmouseover="on('image7');" onmouseout="off('origimage')">		  <area shape="poly" coords="409,201,378,198,318,180,248,166,231,154,225,149,242,148,278,137,325,155,356,176,387,176,412,178,418,182,426,181" href="#" alt="Ghetto Streetz"   onmouseover="on('image3');" onmouseout="off('origimage')">		  <area shape="poly" coords="602,182,593,186,590,207,568,224,551,222,541,218,487,210,487,223,484,233,493,243,522,255,548,256,608,243,608,216,617,210,616,205" href="#" alt="Streetz of Power"  onmouseover="on('image4');" onmouseout="off('origimage')">		</map> </div></div>

And what i think about is another MouseOver function, so when the user goes over the an place on my image he changes the background(function is ready) and writes the info of the picture from a database.any help and tips will be greatly taken ..and remember that the 7 mouseover places has different info (upto 20 lines)...- DJKDra

[jhecht]

I hate area maps... So let me try to understand whats going on: you have an area map, each with a different background image. When the user mouses over the images, it changes the background image of the page to show them a preview or something? and when they click on it, it saves that image name to the database so that the next time the user comes in, it'll show that bg?

[djkdra]

Step 1.0: Mouseover image map.Step 1.1: Image changes to another.Step 1.2: Extract MySQL info from the part of image that mouse goes over.Step 1.3: Print a div with the MySQL info.Step 1.4: Mouseover another part.Step 1.5: Image changes again.Step 1.6: Extract new MySQL info.Step 1.7: print a div with the new MySQL info.- DJKDra

[jhecht]

Ok now i'm really lost. This is going to involve a lot of AJAX results and etc etc... do you have a semi-working demo up for the page so i can get a better idea as to what you want.

[djkdra]

Dont have it online now, sorry... But its actually simple to get it in a "head-picture"... Lets say you have :

OnMouseOver 3: |----------------|---------------|----------------|| Mouseover1 | Mouseover 4					  ||----------------|--------------|-----------------||Mouseover2 | Mouseover 3(mouse is over)||----------------|--------------|-----------------||Info mouseover3:								   ||-------------------------------------------------||Cars for sale: 1432								 ||Houses for rent: 32								 ||Houses for sale: 192							   ||------------------------------------------------|OnMouseOver 4: |----------------|---------------|----------------|| Mouseover1 | Mouseover 4(mouse is over)||----------------|--------------|-----------------||Mouseover2 | Mouseover 3					  ||----------------|--------------|-----------------||Info mouseover4:								   ||-------------------------------------------------||Cars for sale: 231								  ||Houses for rent: 201							  ||Houses for sale: 39128						   ||------------------------------------------------|

[jlhaslip]

like a tooltip?http://jlhaslip.com/samples/tooltips/index.html

[djkdra]

I belive that libover/tooltip dont extract multiply data from a mysql database and sets it into a div?Hmm, think i found a solution tho, i can do it like this i think?! :

$mouseover_one = "SELECT * FROM mouseovers WHERE id='1'";$mouseover_two = "SELECT * FROM mouseovers WHERE id='2'";$mouseover_three = "SELECT * FROM mouseovers WHERE id='3'";$mouseover_four = "SELECT * FROM mouseovers WHERE id='4'";$mouseover_five = "SELECT * FROM mouseovers WHERE id='5'";$mouseover_six = "SELECT * FROM mouseovers WHERE id='6'";$mouseover_sev = "SELECT * FROM mouseovers WHERE id='7'";so that i can extract it at once the page loads, but still need some type of function JS or Ajax to registrer/update when mouse goes over from one image to another tho...

Edited post:think the best solution whould be to use if js, my idea of how it should look like is like the one below, but thats php/js in a wird way , need help to convert to js :

function hovercity(){if($mouseover1==true){document.write($mouseoverdiv1)}if($mouseover2==true){document.write($mouseoverdiv2)}}so on....

Note that i am a total noob! with js, and have no idea of what i just wrote to be honest, but know document.write is a fuction that writes text, in this case $mouseover1 whould be an invisible <div>MySQL info</div> tag...hope you guys are starting to get the picture of what im trying to do here ...- DJKDra

[djkdra]

After over 24 hours of testing and reading i managed to finally get my function "done", or atleast this part of it .. had to extract the db, and do some wird things and some other wird things .. thank you for trying to help guys - DJKDra

[jhecht]

http://demos.mootools.net/Tips You could add an AJAX portion to get the data

[djkdra]

Jhecht:I tried to use the demos.moontools.net/Tips on another function, but it just shows an normal alt, and the JS/CSS dont work :s.. Even tho i dident want a kind of overlib function, i must say i like the fadeing alt .. but as i said, i wont work at all :s..