Supportnet / Forum / Webseiten/HTML
Mouseover soll bild zusätzlich öffnen
Frage
hi ho ,
ich möchte auf meiner website ein bild setzen , auf diesem bild sind verschiedene sachen zu sehen über die es viel informationen gibt. und wenn man mit der maus drüber geht soll sich an der maus ein zusätzliches bild öffnen welches alle infos beinhaltet.
also so ungefähr :
man sieht ein bild von einer küche , geht man über den topf öffnet sich ein bild wo drin stehen könnte Hersteller Preis , geht man mit der maus über den Herd usw. geht man mit der maus aber auf das normale bild wo keine infos z.b. der apfel in der obstschale gibt soll sich auch nichts ändern.
ich habe es mit hotspots versucht aber die wollen sich immer auf eine url ferstlegen , das bild per tabelle aus einander zu nehmen und mit dem mausover effekt alleine zu arbeiten finktioniert auch nicht wirklich weil er das bild dann irgendwie immer komplett drüber legt und oder nur in den abschnitt der tabelle verändert.
es muss doch möglich sein ein bild so zu verpacken das wenn man über einen gegenstand fährt da infos kommen . kein popup , so wie bei windows , wenn man länger mit der maus auf etwas ist macht der ein kleines text feld auf wo infos drin stehen , anstatt text mag ich halt gerne ein bild haben , hat da wer ne lösung zu ? also bitte eine einfache und verständliche :)
thx pet
Antwort 1 von rfb
z.B. so:
Der Inhalt des title-Attribut wird als Tooltipp-Fenster von den gängigen grafisch orientierten Browsern dargestellt, wenn die Maus über dem in area festgelegten Bereich ist.
(Im Gegensatz zur Meinung deines "Hotspot"-Programms kannst du solche Bereiche in Bildern durchaus ohne Link festlegen, dazu dient
<map name="kuechenmap"><area shape="poly" coords="...." nohref="nohref" alt="Kochtopp" title="Kochtopf Fa. XY, 1234 €"> ... </map>
Der Inhalt des title-Attribut wird als Tooltipp-Fenster von den gängigen grafisch orientierten Browsern dargestellt, wenn die Maus über dem in area festgelegten Bereich ist.
(Im Gegensatz zur Meinung deines "Hotspot"-Programms kannst du solche Bereiche in Bildern durchaus ohne Link festlegen, dazu dient
nohref="nohref
".)Antwort 2 von laie
ui supi , ich nutze dreamweaver nur wo gebe ich denn da nun das bild welches sich dann dezent da drüber legen soll fest ? also nicht das das bild sich dann nachher auf 800 x 600 verteilt , so groß ist das normale bild , und der ausschnitt mit den infos ist nur 75 x 60 groß hmm ich probiere mal abwohl ich nicht wirklich weiss wo ich das bild da nun als mouseover einbinden soll hmmmmm grübel
Antwort 3 von disco
moin
also ohne direkte berabeitung des quelltextes wirste es nicht sehr weit bringen. da solltest du dich nen bisschen einarbeiten. ist auch nicht so schwer.
http://de.selfhtml.org/
g,
disco
also ohne direkte berabeitung des quelltextes wirste es nicht sehr weit bringen. da solltest du dich nen bisschen einarbeiten. ist auch nicht so schwer.
http://de.selfhtml.org/
g,
disco
Antwort 4 von rfb
definier dein Problem mal etwas genauer:
Bild als onmouseover aber kein popup geht nämlich nicht!
Was ich vorgeschlagen habe ist ein Tooltipp, ein kleines Textfensterchen, das erscheint wenn die Maus über irgendeinem Element steht.
Wenn du das so machen willst in DW empfehle ich ein paar entsprechende "Hotspots" anzulegen (mit willkürlichen URIs) und anschließend in der Quelltext-Ansicht die hrefs in den area-tags durch nohref="nohref" zu ersetzen und die title-Attribute einzufügen.
Bild als onmouseover aber kein popup geht nämlich nicht!
Was ich vorgeschlagen habe ist ein Tooltipp, ein kleines Textfensterchen, das erscheint wenn die Maus über irgendeinem Element steht.
Wenn du das so machen willst in DW empfehle ich ein paar entsprechende "Hotspots" anzulegen (mit willkürlichen URIs) und anschließend in der Quelltext-Ansicht die hrefs in den area-tags durch nohref="nohref" zu ersetzen und die title-Attribute einzufügen.
Antwort 5 von laie
hm genauer ..... hm kennt einer das spiel diablo2 ? so wie man dort im inventar mit der maus über seine gegenstände fährt erscheint dann die info von dem gegestand , so mag ich das in einer homepage haben.
und du hast mir ja schon prima geholfen , nur anstatt text der dann erscheinen soll , soll ein bild da sein. ich schau mal ob ich ein beispiel screen machen kann , auch wenns von diablo2 sein solte , aber ein besseres beispiel fällt mir spontan einfach nicht ein.
oder , viel mir grade auf , wenn ich unten bei windowsxp in der taskleiste etwas minimiert habe und mit der maus drüber fahre zeigt der mir nen textfeld an mit der info über das betreffend geöffnete programm an , also den namen , so und anstatt den text soll dann ein bild sich öffnen ...... hm ich wüsste nicht wie ich das sonst erklären soll :(
und du hast mir ja schon prima geholfen , nur anstatt text der dann erscheinen soll , soll ein bild da sein. ich schau mal ob ich ein beispiel screen machen kann , auch wenns von diablo2 sein solte , aber ein besseres beispiel fällt mir spontan einfach nicht ein.
oder , viel mir grade auf , wenn ich unten bei windowsxp in der taskleiste etwas minimiert habe und mit der maus drüber fahre zeigt der mir nen textfeld an mit der info über das betreffend geöffnete programm an , also den namen , so und anstatt den text soll dann ein bild sich öffnen ...... hm ich wüsste nicht wie ich das sonst erklären soll :(
Antwort 6 von laie
ich hab da grade nochmal gebastelt und dein tip ist genau so wie ich das will nur mit dem unterschied das er anstatt des textes ein vorgefertigtes bild welches alle infos beinhaltet drüberlegt.
also anstatt den text ein bild , ansonsten ist das so wie ich das schon will.
also anstatt den text ein bild , ansonsten ist das so wie ich das schon will.
Antwort 7 von rfb
das ist so einfach nicht möglich, da meines Wissens nur OPERA das mouseover bei area-tags in Zusammenarbeit mit PopUps zufriedenstellend beherrscht (Firefox so lala, IE bei mir gar nicht). Zudem sind derartige JavaScript-Lösungen stark von den Browsereinstellungen abhängig und daher recht unsicher.
Um ein Bild erscheinen zu lassen brauchst du aber ein PopUp. Oder du versuchst das ganze völlig anders zu lösen (Flash, JAVA oder irgendein anderes Zusatzprogramm, ... )
Wie gesagt: "nicht so einfach"
Um ein Bild erscheinen zu lassen brauchst du aber ein PopUp. Oder du versuchst das ganze völlig anders zu lösen (Flash, JAVA oder irgendein anderes Zusatzprogramm, ... )
Wie gesagt: "nicht so einfach"
Antwort 8 von wadspit
Hallo,
die einzige Möglichkeit das so wie Du es Dir vorstellst zu realisieren ist über
oder so ähnlich halt
Gruß
Fred
die einzige Möglichkeit das so wie Du es Dir vorstellst zu realisieren ist über
<HEAD>
<SCRIPT LANGUAGE="JAVASCRIPT">
function mouse_pos_to_div(){
document.all.popup1.style.left = window.screenX;
document.all.popup1.style.top = window.screenY;
document.all.popup1.style.visibility =visible;
}
function mouse_out(){
document.all.popup1.style.visibility =hidden;
}
</SCRIPT>
<BODY>
<BILD oder HOTSPOT onMouseOver="mouse_pos_to_div();" onMouseOut="mouse_out();">
<DIV ID="popup1" STYLE="position:absolute"><IMG SRC="DEINBILD"></DIV>
oder so ähnlich halt
Gruß
Fred
Antwort 9 von rfb
Ich vermute mal, das die Einschränkungen bzgl. onmouseover und area genauso für diese Lösung gelten. Mit dem veralteten
document.all
schreibst du zudem ausschließlich für den IE, der mit dem mouseover (bei meinem Versuch) noch am schlechtesten (nämlich gar nicht) zurecht kam.Antwort 10 von wadspit
Dann halt
wird von allen Browsern unterstützt.
Hätte ich ein wenig mehr Zeit würde ich dir die Funktionalität beweisen @rfb ;-)
Gruß
Fred
v_object = document.getElementById("popup1");
wird von allen Browsern unterstützt.
Hätte ich ein wenig mehr Zeit würde ich dir die Funktionalität beweisen @rfb ;-)
Gruß
Fred
Antwort 11 von rfb
ich bin gespannt ;-)
Antwort 12 von wadspit
Antwort 13 von rfb
danke ;-)
Antwort 14 von rfb
ich hab versuchsweise mal das onmouseover ins area-tag gelegt und - schau mal an -, selbst da klappt es. Eine nette Alternative zum nun gar nicht laufenden PopUp (wobei ich aber trotzdem das einfache Tooltipp immer noch vorziehe, da es einfach die JS-Problematik nicht mit sich trägt ;-)
Antwort 15 von wadspit
Komm schon, gib es zu, in diesem Falle gibt es keine JS-Problematik ;-)
Antwort 16 von rfb
doch, doch, die grundlegende JS-Problematik: ob JS aktiviert ist hängt vom Browser und dessen Einstellungen ab, also darf über JS nie irgendwas wichtiges laufen (zumindest nicht allein).
Abgesehen davon läuft das Programm nur wenn der JS-Interpreter DOM-fähig ist (
Aber ansonsten ;-)
Abgesehen davon läuft das Programm nur wenn der JS-Interpreter DOM-fähig ist (
document.getElementById
kennt der olle NS4 z.B. nicht)Aber ansonsten ;-)
Antwort 17 von wadspit
Auf dem C64 läuft nicht mal HTML... ;-)