Mouseoverbild in einem Bild :O

[Masterplaine]

Ich hoffe erst mal, dass der Titel nicht allzu verwirrend ist aber anders konnte ich es nicht formulieren. Es geht um Folgendes:

Ich möchte ein Grundbild des Charakterinventars haben.



Natürlich mit den jeweiligen Waffen die der Charakter trägt.
Also so -->




So. Und wenn ich jetzt ein Mouseover über das jeweilige Item habe, soll ein Popup erscheinen, in dem man sich die dazugehörigen Werte anschauen kann. Dasselbe soll auch mit den Charms im Inventar möglich sein.

Nun zu meiner Frage:
Das es möglich ist, kann ich mir alleine denken ^_^, nur hat vielleicht jemand eine Ahnung wie ich es anstellen kann? Und möglichst so, dass ich es dann auch bedenkenlos in diesem Forum posten kann.
Ich scheue nicht, mich in irgendwelche Programme einzuarbeiten und auch Softwarelösungen die etwas kosten dürfen genannt werden (wenn sie mir gefällt bin ich auch gerne bereit dafür zu bezahlen).
Ich suche konkrete Tipps und Ratschläge oder eventuelle Hilfe beim Finden dieser.
Vielleicht ist das Ganze auch ganz einfach und ich kann es mir nur nicht vorstellen :O.

Sollte das Thema hier verfehlt sein so bitte ich die Mods es einfach zu verschieben.

Schon einmal Danke an alle, die mir Hilfe zukommen lassen.

Masterplaine

 

[Stormer]

Hrm das heißt an sich im Klartext slicen und entsprechende HTML-Tags dazudonnern - aber ob du das dann tatsächlich im Forum entsprechend wiedergeben kannst, wage ich zu bezweifeln.

Allerdings schlage ich dir an dieser Stelle folgende, etwas einfachere Methode vor, die Snowball in einer seiner Charvorstellungen umgesetzt hat (entsprechend in der Itemsektion auf die jeweiligen Items klicken, vielleicht reicht das ja auch ^^)

Gruß

 

[drc]

Vom Forum hat ja keiner was gesagt

HTML mit ImageMaps und ein wenig JS für die Popups sollte das Problem locker in den Griff kriegen.

 

[Masterplaine]

Vom Forum hat ja keiner was gesagt

HTML mit ImageMaps und ein wenig JS für die Popups sollte das Problem locker in den Griff kriegen.

Nun Ja doch, ich möchte das Ganze ja hier im Forum anwenden können .

@ Stormer:

Daran habe ich auch schon gedacht, aber das mag ich nun eher weniger. Finde ich persönlich nicht schön umgesetzt und aufwendig jedes Bild einzeln zu klicken und dann noch zu gucken. Da finde ich das Mouseoverbild angenehmer.
Btw slicen?

Danke erstmal für die Vorschläge, ich hoffe es kommen weitere. Und scheut nicht, eure Fremdwörter noch mit Beschreibungen zu unterlegen

 

[drc]

Hier im Forum wird das nicht machbar sein, da aus Sicherheitsgründen kein Javascript und kein echtes HTML in Posts benutzt werden darf.

 

[Masterplaine]

Hier im Forum wird das nicht machbar sein, da aus Sicherheitsgründen kein Javascript und kein echtes HTML in Posts benutzt werden darf.

Und wenn es eine Art interaktives Bild wäre? Das könnte man es doch irgendwo hochladen und ganz normal verlinken.
Oder wäre das auch nicht machbar?

 

[aNjIrU]

Und wenn es eine Art interaktives Bild wäre?

Es gibt kein "interaktives" Bild.

Entweder du machst es mit Javascript & HTML, dafür brauchst du dann aber auch eigenen Webspace zum hochladen.
Oder du erstellst eine Flashanwendung, da gilt dann aber auch das gleiche, du brauchst Webspace und müsstest dich auch erstmal reinarbeiten in Actionscript.

 

[Masterplaine]

Es gibt kein "interaktives" Bild.

Entweder du machst es mit Javascript & HTML, dafür brauchst du dann aber auch eigenen Webspace zum hochladen.
Oder du erstellst eine Flashanwendung, da gilt dann aber auch das gleiche, du brauchst Webspace und müsstest dich auch erstmal reinarbeiten in Actionscript.

An Webspace ranzukommen sollte nicht das Problem sein. Einarbeiten auch nicht. In Actionscript reinarbeiten? Was brauche ich denn dafür? Mehr Informationen bitte

//: Im Grunde kann ich es ja verlinken aber ich fände es besser, wenn man es direkt in einen Beitrag einbauen könnte.

 

[Silencer23]

Im Grunde kann ich es ja verlinken aber ich fände es besser, wenn man es direkt in einen Beitrag einbauen könnte.

Hier im Forum wird das nicht machbar sein, da aus Sicherheitsgründen kein Javascript und kein echtes HTML in Posts benutzt werden darf.

Sagt doch alles aus^^

 

[Masterplaine]

Sagt doch alles aus^^

Ja, ok ist ja nun klar .

Ich suche aber immer noch nach konkreten Angaben und Hilfestellungen mit Details und nicht nur hingeworfenen Wörtern. Nichts gegen die Hilfe, aber damit kann ich nun nichts anfangen .

Was brauche ich also für Programme um die Idee umzusetzen? Was für Kenntnisse und worauf sollte ich mich gefasst machen?
Falls jemand Ahnung von der Materie hat dann weiß er das doch auch und kann dementsprechend antworten.
Aber immer nur in Fragmenten und ohne kompletten Bezug zu meiner Fragestellung zu antworten verfehlt ein wenig den Sinn, finde ich.

Grüße, Plaine.

 

[drc]

Programme: Notepad.
Ansonsten halt Webspace, um die fertige HTML-Datei mit dem Bild da zu hosten.

Teil das Bild mit einer Imagemap in Bereiche und benutz den OnMouseOver-Eventhandler, um in einem div oder einem anderen Blockelement Deiner Wahl den gewünschten Text anzuzeigen. Mehr lässt sich dazu nicht sagen, ohne das zu coden.

 

[Masterplaine]

Programme: Notepad.
Ansonsten halt Webspace, um die fertige HTML-Datei mit dem Bild da zu hosten.

Teil das Bild mit einer Imagemap in Bereiche und benutz den OnMouseOver-Eventhandler, um in einem div oder einem anderen Blockelement Deiner Wahl den gewünschten Text anzuzeigen. Mehr lässt sich dazu nicht sagen, ohne das zu coden.

Gut, mit sowas lässt sich arbeiten. Danke dir, ich arbeite mich mal rein und probiere mich aus.
Sollten noch Fragen auftauchen poste ich einfach nochmal hier rein.
Sollte noch jemand andere Vorschläge haben: immer her damit.

Grüße, Plaine

 

[Masterplaine]

Spoiler

<html>

<head>
<title> Test einer Verweis-sensitiven Grafik </title>
</head>

<body>
<h1>Ueberblick</h1>

<img src="http://img522.imageshack.us/img522/7681/mouseovertester.jpg" alt="Inventar" usemap="#Inventar" />

<p>

<map name="Inventar">
<area shape="rect" coords="418,107,477,221"
onmouseover="document.Bild.src='http://img12.imageshack.us/img12/6746/waffeslot1.png';"
onmouseout="document.Bild.src='.';">

<img src="http://img12.imageshack.us/img12/6746/waffeslot1.png"
name="Bild"
alt="Grabknochen">




</map>

</p>



</body>


</html>

So weit wäre ich bis jetzt gekommen^^.
Nun haben ich aber folgendes Problem: Wenn ich über die definierte verweis-sensible Fläche ein mouseover habe, dann bekomme ich kein Popup so wie ich es mir vorgestellt habe sondern der Browser läd das Bild unter meinem Bild und somit lässt es sich natürlich nicht sonderlich gut angucken.

Was muss ich noch tun, dass das Bild direkt am Mauszeiger also quasi neben der definierten Fläche erscheint?
Habe jetzt auf die Schnelle nichts per Google gefunden, ich gucke aber weiter und poste trotzdem hier, vielleicht kann mir jemand fachversiertes helfen .

Mfg Masterplaine.

 

[drc]

Dazu müsstest Du ein Element mit bösartiger Javascript-Magie an den Mauszeiger binden: So ungefähr.

 

[Masterplaine]

Dazu müsstest Du ein Element mit bösartiger Javascript-Magie an den Mauszeiger binden: So ungefähr.

Ja nun habe ich ersteinmal versucht, das Beispielscript auszuführen aber schon das hat nicht funktioniert .

Ich weiß gerade nicht, wo ich den div-tag in der Imagemap setzen muss, damit das Bild der Maus folgt

(Vielleicht bin ich auch nur noch zu müde^^)

Mfg.

//Ich hab jetzt Folgendes gemacht:

Spoiler

<html>

<head>
<script type="text/javascript">
<!--
wmtt = null;
document.onmousemove = updateWMTT;
function updateWMTT(e) {
if (wmtt != null && wmtt.style.display == 'block') {
x = (e.pageX ? e.pageX : window.event.x) + wmtt.offsetParent.scrollLeft - wmtt.offsetParent.offsetLeft;
y = (e.pageY ? e.pageY : window.event.y) + wmtt.offsetParent.scrollTop - wmtt.offsetParent.offsetTop;
wmtt.style.left = (x + 20) + "px";
wmtt.style.top = (y + 20) + "px";
}
}
function showWMTT(id) {
wmtt = document.getElementById(id);
wmtt.style.display = "block";
}
function hideWMTT() {
wmtt.style.display = "none";
}
-->
</script>
<style>
<!--
.tooltip {
position: absolute;
display: none;
background-color: #FFFFFF;
}
-->
</style>
</head>
<body>
<div id="1" class="tooltip"><img src="http://img12.imageshack.us/img12/6746/waffeslot1.png" name="Bild" alt="Grabknochen"></div>
<a onmouseover="showWMTT('1')" onmouseout="hideWMTT()" href="#">
Unser Link
</a>


</body>



</html>

Jetzt fand ich nur noch nicht heraus, wie sich das ganze IN der Imagemap verwenden lässt. Kannst du mir da zufällig nochmal zur Hand gehen?

 

[Unix]

Einfach statt des <a ...> die Map einsetzen:

<map name="Inventar">
<area coords="418,107,477,221" onmouseover="showWMTT('1')" onmouseout="hideWMTT()" href="#" />
</map>

 

[Masterplaine]

Einfach statt des <a ...> die Map einsetzen:

<map name="Inventar">
<area coords="418,107,477,221" onmouseover="showWMTT('1')" onmouseout="hideWMTT()" href="#" />
</map>

Jetzt bin ich komplett verwirrt .
Ich schlag mich hier mit Mühe und Not durch , könntest du das eventuell noch detailierter erläutern?
Ich bin nur gerade verwirrt darüber, wie das dann aussehen soll:

<body>

<h1>Ueberblick</h1>

<img src="http://img522.imageshack.us/img522/7681/mouseovertester.jpg" alt="Inventar" usemap="#Inventar" />	
 


<p>
 
 <map name="Inventar">
 <area shape="rect" coords="418,107,477,221">
 <div id="1" class="tooltip">
 <img src="http://img12.imageshack.us/img12/6746/waffeslot1.png">
 </div>
 <a onmouseover="showWMTT('1')" onmouseout="hideWMTT()" href="#">
 </a>
 </map>

</p>
</body>

Soll ich jetzt einfach <a..> rausnehmen und die map einfach nochmal einfügen oder...

Help please

 

[Unix]

Du hast im Prinzip alle Bausteine, musst nur noch zusammensetzen:

Das <a..> muss raus, Du willst den mouseovereffekt ja nicht auf irgendeinem Link haben sondern auf der map (die ja schon da ist). Also musst Du es auch da hin packen:

<body>
<h1>Ueberblick</h1>

<img src="http://img522.imageshack.us/img522/7681/mouseovertester.jpg" alt="Inventar" usemap="#Inventar" />	

<p> 
 <map name="Inventar">
 <area shape="rect" coords="418,107,477,221" [b][COLOR="RoyalBlue"]onmouseover="showWMTT('1')" onmouseout="hideWMTT()" href="#"[/COLOR][/b]>
 <div id="1" class="tooltip">
 <img src="http://img12.imageshack.us/img12/6746/waffeslot1.png">
 </div>
 </map>
</p>

</body>

Achso, dass <div id="1" ..><img ..></div> solltest Du glaub ich außerhalb des <map> Tags setzen (also dahinter oder so).

 

[Masterplaine]

Wow :O
Endlich klappt es! Juhu! Da hat es sich doch gelohnt hier nach Hilfe zu fragen .
Oh man, das war ein Aufwand und jetzt muss ich das ganze noch für das ganze Inventar hinkriegen^^.

Ich danke euch erstmal allen für die Hilfe vor allem Thunderbirds und drc die mir die Lösung näher gebracht haben.

Sollte ich das mit den weiteren Dingen die ich noch vorhabe nicht hinkriegen werde ich mich nochmal melden

So far, Masterplaine.

//Das mit dem <div..> tag funktioniert bisher auch innerhalb :O, aber wenns Probleme gibt schieb ichs mal raus

 

[Masterplaine]

So...
Nun habe ich die ganze Schreibarbeit hinter mir.

Wenn mir jetzt noch jemand sagen könnte warum alles bis auf das Schild funktioniert...

Spoiler

<html>

<head>
<script type="text/javascript">
<!--
wmtt = null;
document.onmousemove = updateWMTT;
function updateWMTT(e) {
if (wmtt != null && wmtt.style.display == 'block') {
x = (e.pageX ? e.pageX : window.event.x) + wmtt.offsetParent.scrollLeft - wmtt.offsetParent.offsetLeft;
y = (e.pageY ? e.pageY : window.event.y) + wmtt.offsetParent.scrollTop - wmtt.offsetParent.offsetTop;
wmtt.style.left = (x + 20) + "px";
wmtt.style.top = (y + 20) + "px";
}
}
function showWMTT(id) {
wmtt = document.getElementById(id);
wmtt.style.display = "block";
}
function hideWMTT() {
wmtt.style.display = "none";
}
-->
</script>
<style>
<!--
.tooltip {
position: absolute;
display: none;
background-color: #FFFFFF;
}
-->
</style>
</head>
<body>
<h1>Ueberblick</h1>

<img src="http://img522.imageshack.us/img522/7681/mouseovertester.jpg" alt="Inventar" usemap="#Inventar" />

<p>
<map name="Inventar">
<!-- Waffe -->
<area shape="rect" coords="418,106,475,220" onmouseover="showWMTT('1')" onmouseout="hideWMTT()" href="#">
<!--Helm -->
<area shape="rect" coords="535,62,591,122" onmouseover="showWMTT('2')" onmouseout="hideWMTT()" href="#">
<!--Armor -->
<area shape="rect" coords="532,134,591,222" onmouseover="showWMTT('3')" onmouseout="hideWMTT()" href="#">
<!--Amulett -->
<area shape="rect" coords="606,91,634,121" onmouseover="showWMTT('4')" onmouseout="hideWMTT()" href="#">
<!--Shield -->
<area shape="rect" coords="648,107,707,221 onmouseover="showWMTT('5')" onmouseout="hideWMTT()" href="#">
<!-- Gloves -->
<area shape="rect" coords="418,236,475,296" onmouseover="showWMTT('6')" onmouseout="hideWMTT()" href="#">
<!-- RingL -->
<area shape="rect" coords="491,236,520,266" onmouseover="showWMTT('7')" onmouseout="hideWMTT()" href="#">
<!-- Belt -->
<area shape="rect" coords="534,236,592,265" onmouseover="showWMTT('8')" onmouseout="hideWMTT()" href="#">
<!-- RingR -->
<area shape="rect" coords="606,236,634,266" onmouseover="showWMTT('9')" onmouseout="hideWMTT()" href="#">
<!-- Boots -->
<area shape="rect" coords="648,237,707,296" onmouseover="showWMTT('10')" onmouseout="hideWMTT()" href="#">

</map>




<!-- Waffe -->
<div id="1" class="tooltip"><img src="http://img12.imageshack.us/img12/6746/waffeslot1.png">
</div>
<!--Helm -->
<div id="2" class="tooltip"><img src="http://img810.imageshack.us/img810/8320/headgear.png">
</div>
<!--Armor -->
<div id="3" class="tooltip"><img src="http://img27.imageshack.us/img27/5010/armorg.png" >
</div>
<!--Amulett -->
<div id="4" class="tooltip"><img src="http://img832.imageshack.us/img832/2286/amulett.png" >
</div>
<!--Shield -->
<div id="5" class="tooltip"><img src="http://img502.imageshack.us/img502/7744/shieldd.png" >
</div>
<!-- Gloves -->
<div id="6" class="tooltip"><img src="http://img405.imageshack.us/img405/6828/glovesb.png" >
</div>
<!-- RingL -->
<div id="7" class="tooltip"><img src="http://img521.imageshack.us/img521/5100/ringlm.png" >
</div>
<!-- Belt -->
<div id="8" class="tooltip"><img src="http://img69.imageshack.us/img69/4024/beltk.png" >
</div>
<!-- RingR -->
<div id="9" class="tooltip"><img src="http://img196.imageshack.us/img196/1131/ringra.png" >
</div>
<!-- Boots -->
<div id="10" class="tooltip"><img src="http://img31.imageshack.us/img31/5521/bootsw.png" >
</div>

</p>

</body>

</html>

Dann wäre ich sehr froh. Ich versuche noch weiter, das Problem zu lösen, wäre aber über jede Hilfe froh

Mfg, Masterplaine