webForumDet fria alternativet

Mouseover-effekt

3 svar · 612 visningar · startad av David N

David NMedlem sedan nov. 200231 inlägg
#1

Hej,

Jag har ett litet problem. Jag håller på med en site som innehåller en karta som i sin tur har några utmärkta platser. Kartan är alltså bakgrund i en div, och platserna är utmärkta med vanliga bilder som är utpositionerade på kartan.

Ni kan se den på http://davidnilsson.info/200ar/?p=map - sidan är ett litet skolprojekt som är påbörjat lite för sent, och skall vara klart på onsdag. Därav kanske det inte ser ut precis som jag beskriver nedan när ni kollar på den. Dessutom fungerar den inte i skrivande stund i IE, och detta gör inget då det enbart är en prototyp som därför bara behöver fungera vid redovisning på torsdag (i firefox). Det är inget som någon kommer att jobba vidare med efter det.

Problemet/frågan är som följer: Jag vill att en ruta (kan även vara en vanlig bild) med mer information kommer upp när jag för musen över dessa små bilder på kartan (och försvinner när jag för bort musen igen). Det hade även varit en bonus om texten/bilden hade stannat om man klickat på bilden, men det är inte absolut nödvändigt.

Jag har provat att göra detta på några olika sätt. De små bilderna som representerar de olika positionerna på kartan är utplacerade med relativa "koordinater" så att de ligger på rätt ställe. Jag har provat att i sin tur lägga dem i en div som jag har gett en CSS:hover-effekt som poppar upp en bild när jag testat. Effekten fungerar, men bilden kommer inte upp där jag vill ha den (jag vill att den ska komma upp ovanför den lilla bilden på kartan). Tyvärr verkar man inte kunna ange en annan position i själva :hover-attributen.

Nåja, jag har en till funktion jag också skulle vilja att denna mouseover genomför, jag vill nämligen även kunna ändra timelinen där nere på sidan när jag för musen över ett objekt på kartan, så jag kanske inte kan använda mig av denna :hover-funktion i över huvud taget... Vet faktiskt inte riktigt vad jag kan använda mig av för att uppnå dessa saker, så all hjälp uppskattas!

MVH,
David N

MeleaMedlem sedan juli 20032 667 inlägg
#2

Jag hade absolut löst det med Google Maps API istället - om det nu inte är ett krav att ni använder er av en bild med en karta.
Exempel på hur du kan göra finns här: http://econym.org.uk/gmap/tooltips4.htm och ett mer precist exempel på hur jag tror du vill ha det hittar du här: http://econym.org.uk/gmap/example_maptips4.htm

drewMedlem sedan mars 2007748 inlägg
#3

Jag brukar använda http://www.walterzorn.com/tooltip/tooltip_e.htm för såna effekter. Om du inte får använda yttre bibliotek så kan du kanske hitta tips i koden.

David NMedlem sedan nov. 200231 inlägg
#4

drew skrev:

Jag brukar använda http://www.walterzorn.com/tooltip/tooltip_e.htm för såna effekter. Om du inte får använda yttre bibliotek så kan du kanske hitta tips i koden.

Tackar, det här verkar vara precis vad jag är ute efter, tack till tipset om google maps också :)

Genererad på 374 ms · cache AV · v20260730165559-full.f96bc7eb