Supportnet Computer
Planet of Tech

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:
<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

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.

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 :(

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.

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"

Antwort 8 von wadspit

Hallo,

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

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

Hier RFB guck ma:

www.mops-ag.de/beweis.htm

;-)

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 (
document.getElementById
kennt der olle NS4 z.B. nicht)
Aber ansonsten ;-)

Antwort 17 von wadspit

Auf dem C64 läuft nicht mal HTML... ;-)

Ich möchte kostenlos eine Frage an die Mitglieder stellen:


Ähnliche Themen:


Suche in allen vorhandenen Beiträgen: