HTMLWorld - HTML, CSS, JavaScript, PHP, Java, Flash und vieles mehrHTMLWorld:   Home | Impressum
 

 
 

Anzeige 
 
HTMLWorld » Forum

Thema anzeigen - Bilder statt Text mit ALT="xxx"

 FAQFAQ   SuchenSuchen   MitgliederlisteMitgliederliste   BenutzergruppenBenutzergruppen   RegistrierenRegistrieren 
 ProfilProfil   Einloggen, um private Nachrichten zu lesenEinloggen, um private Nachrichten zu lesen   LoginLogin 

Bilder statt Text mit ALT="xxx"

 

Neues Thema eröffnen   Neue Antwort erstellen    HTMLWorld Foren-Übersicht
   HTML
Vorheriges Thema:
Nächstes Thema:  
Autor Nachricht
King_Pelican



Anmeldungsdatum: 25.11.2005
Beiträge: 2

BeitragVerfasst am: 25.11.2005 12:05:47    Titel: Bilder statt Text mit ALT="xxx" Antworten mit Zitat

Vermutlich typische Anfängerfrage:
Wie kann man Bilder und nicht nur Text anzeigen, wenn man mit der Maus auf ein Feld geht?

King_Pelican dankt für jede Hilfe
Ciao


Zuletzt bearbeitet von King_Pelican am 01.12.2005 09:07:47, insgesamt einmal bearbeitet
Nach oben
Benutzer-Profile anzeigen Private Nachricht senden
Gast






BeitragVerfasst am: 28.11.2005 10:41:44    Titel: Re: Frames fär weitere Seiten abschalten Antworten mit Zitat

King_Pelican hat folgendes geschrieben:
Vermutlich typische Anfängerfragen:
1. Wenn man Frames für eine Seite festgelegt hat und dann eine andere Seite anklickt, erscheint diese neue Seite innerhalb des Rahmens. Ich hätte aber gern eine ganze nicht eingeteilte Seite.

2. Wie kann man Bilder und statt dem Text mit ALT anzeigen, wenn man mit der Maus auf ein Feld geht?

Manches geht so einfach mit den guten HTML-WORLD-Vorgaben, bei manchen Sachen rätselt man schon lange.
King_Pelican dankt für jede Hilfe
Ciao


Lösung zu 1 gefunden: A target ="_top"
Nach oben
Katharina



Anmeldungsdatum: 07.01.2006
Beiträge: 4

BeitragVerfasst am: 07.01.2006 16:35:53    Titel: Re: Bilder statt Text mit ALT="xxx" Antworten mit Zitat

King_Pelican hat folgendes geschrieben:
Vermutlich typische Anfängerfrage:
Wie kann man Bilder und nicht nur Text anzeigen, wenn man mit der Maus auf ein Feld geht?

King_Pelican dankt für jede Hilfe
Ciao



Das würde mich auch brennend interessieren.
Ich habe jetzt mindestens zwei Tage mit Hidden Pics rumprobiert, aber das wollte nicht funktionieren. Deshalb versuche ich jetzt anstelle dessen eine andere Lösung zu finden.

Mein Problem:
Ich möchte eine Karte erstellen in der an bestimmten Stellen Bilder eingefügt werden können, die als Verweise dienen. Allerdings soll der Alternativtext dadurch nicht beeinträchtigt werden.

Meine versuchte Lösung:
Zwar funktionierte das Image-Map, aber die Eingefügten Bilder nicht. Also habe ich mit JacaScript versucht HiddenPics zu erstellen und diese dann in eine Tabelle, die die Karte als Hintergrundbild hatte einzufügen. Die Hiddenpics haben auch funktioniert, aber von den zwei Probebildern war nur eins an seinem Platz. Das Zweite war nicht auf dem Hintergrundbild, sondern irgendwo darunter. Ich habe alles Mögliche versucht, aber es ist mir nicht gelungen auch das zweite Bild an den Platz zu bringen wo es hingehört. Schließlich habe ich aufgegeben und suche jetzt eine andere Lösung oder jemanden der mir sagen kann was ich falsch mache.

http://www.gwebspace.de/gut-silberaue/Stallseiten/Deckhengststall.html
Hier mal das Ganze wie es jetzt ist. Das erste Bild ist an Ort und Stelle in der wagerechten Stallgasse. Das zweite Bild aber soll eigentlich am unteren Ausgang sein, liegt aber tatsächlic bald 500px darunter.

Das ist der Code:
<!--webbot bot="HTMLMarkup" startspan --> <script language="JavaScript1.2">
function high(image1)
{theobject=image1
highlighting=setInterval("highlightit(theobject)",50)
}function low(image1)
{clearInterval(highlighting)
image1.filters.alpha.opacity=50
}function highlightit(cur1)
{if(cur1.filters.alpha.opacity<100)
cur1.filters.alpha.opacity+=5
else if(window.highlighting)
clearInterval(highlighting)
}
function high(image2)
{theobject=image2
highlighting=setInterval("highlightit(theobject)",50)
}function low(image2)
{clearInterval(highlighting)
image2.filters.alpha.opacity=50
}function highlightit(cur2)
{if(cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=5
else if(window.highlighting)
clearInterval(highlighting)
}
</script>
<table background="http://www.oyla11.de/userdaten/22581610/bilder/Deckhengststall.gif" style="background-repeat:no-repeat"><TR><TD>
<a href="http://www.oyla11.de/cgi-bin/designs/standard1/index.cgi?page=text&id=62458949&userid=22581610"><img src="http://www.oyla11.de/userdaten/22581610/bilder/Allgemeine_Informationen.jpg" alt="Allgemeine Informationen zum Deckhengststall" hspace=195 vspace=377 ONMOUSEOVER="high(this)" ONMOUSEOUT="low(this)" class="inset" style="FILTER: alpha(opacity=0)"> </a>
<a href="http://www.oyla11.de/cgi-bin/designs/standard1/index.cgi?page=text&id=79283107&userid=22581610"> <img src="http://www.gwebspace.de/gut-silberaue/Stallseiten/Pfeil.jpg" alt="Zurück zum Lageplan" hspace=65 vspace=405 ONMOUSEOVER="high(this)" ONMOUSEOUT="low(this)" class="inset" style="FILTER: alpha(opacity=0)"> </a></div><!--webbot bot="HTMLMarkup" endspan --> </TD></TR></table>

Ich bin mittlerweile echt verzweifelt.
Hoffentlich ist das hier richtig trotzdem es ja unter anderem auch um JavaScript geht. Ich wusste einfach nicht wo ichs reischreiben soll und da dieses Thema mir eigentlich aus der Seele sprach habe ich es am Ende hier reingeschrieben. Falls das nicht richtig war, dann tut es mir leid. Da kann ich mich dann nur entschuldigen.

Es wäre wirklich toll, wenn ihr mir helfen könntet auch wenn ich hier falsch sein sollte.
Nach oben
Benutzer-Profile anzeigen Private Nachricht senden
Sir Quicksand
Häufiger Poster


Anmeldungsdatum: 19.01.2005
Beiträge: 304
Wohnort: Hannover

BeitragVerfasst am: 08.01.2006 15:08:12    Titel: Antworten mit Zitat

Ich würde mal sagen so:
Code:

<script type="text/javascript">
   function show()
   {
      document.getElementById("bild").style.visibility = "visible";
   }
   
   function hide()
   {
      document.getElementById("bild").style.visibility = "hidden";
   }
</script>


bal blla<br>   
<img src="smilies/grins.gif" id="bild" style="visibility: hidden;"><br>
lbal<br>
<br>
blal<br>

<img src="smilies/grins.gif" alt="hallo" onMouseOver="show()" onMouseOut="hide()">

Jetzt mußt Du nur noch das einzublendene Bild positionieren.
Ãœbrigends: der Alternative Text funzt bei FF nicht. Jedenfalls bei mir nicht.
Nach oben
Benutzer-Profile anzeigen Private Nachricht senden Website dieses Benutzers besuchen
Katharina



Anmeldungsdatum: 07.01.2006
Beiträge: 4

BeitragVerfasst am: 09.01.2006 13:49:27    Titel: Antworten mit Zitat

Danke für deinen Lösungsversuch.
Das ist aber leider nicht das, was ich brauche. Vielleicht habe ich auch was falsch gemacht. Bei mir wurde nur ein Bild ordentlich angezeigt. Sobald ich ein zweites Bild versucht habe einzubauen, wurde zwar das erste Bild noch angezeigt, aber wenn man darüber gefahren ist, erschien nur das Zweite. Ich brauche eine Lösung bei der man mehrere Bilder miteinander kombinieren kann, ohne das sie sich gegenseitig beeinträchtigen und vorallem müssen sie an ihrem Platz bleiben.

Ich glaube ich weiß jetzt wo der Fehler liegt. Er liegt in den Tabelleneigenschaften. Mir ist heute Nacht eingefallen, dass man ja auch versuchen könnte die Bilder in der Tabelle zu plazieren. Das habe ich eben versucht, nachdem das mit deinem Vorschlag nicht geklappt hat. Das ergab das gleiche Problem, das ich mit den Hiddenpics habe.
Nur das erste Bild ist an seinem Platz, das Zweite aber nicht.

Das kommt raus:
http://www.gwebspace.de/gut-silberaue/Stallseiten/test.html

Wenn man dieses Problem lösen könnte, dann würden auch die Hiddenpics funktionieren. Das untere Bild soll mit auf das Hintergrundbild. Aber wie schaffe ich das? Ich bin echt ratlos. Es soll ja nicht nur bei den Beiden bleiben, sondern es ist geplant, dass irgendwann einmal ungefähr 20 Bilder auf dem Hintergrund angezeigt werden.

Hier der Code:
<table><TR><TD background="http://www.oyla11.de/userdaten/22581610/bilder/Deckhengststall.gif" style="background-repeat:no-repeat" border=0 cellspacing=0 cellpadding=0>
<img src="http://www.oyla11.de/userdaten/22581610/bilder/Allgemeine_Informationen.jpg" alt="Allgemeine Informationen zum Deckhengststall" hspace=195 vspace=377>
<img src="http://www.gwebspace.de/gut-silberaue/Stallseiten/Pfeil.jpg" alt="Zurück zum Lageplan" hspace=65 vspace=405>
</TD></TR></table>
Nach oben
Benutzer-Profile anzeigen Private Nachricht senden
Katharina



Anmeldungsdatum: 07.01.2006
Beiträge: 4

BeitragVerfasst am: 11.01.2006 16:13:03    Titel: Antworten mit Zitat

Wenn mir bei dem obigen Problem niemand helfen kann, dann würde es schon reichen zu wissen, ob man bei Verweis-sensitiven Grafiken zusätzlich zu dem alt-Text noch ein Bild einfügen kann und wenn ja wie.
Nach oben
Benutzer-Profile anzeigen Private Nachricht senden
admin
Site Admin


Anmeldungsdatum: 16.01.2005
Beiträge: 323
Wohnort: Berlin

BeitragVerfasst am: 11.01.2006 21:36:01    Titel: Antworten mit Zitat

nun, die eine antwort war doch schon ganz richtig, was du anzeigst bleibt ja dir überlassen.

Code:
<div onmouseover="document.getElementById('anzeigen').visibility = 'visible'" onmouseout="document.getElementById('anzeigen').visibility = 'hidden'">meinfeld</div>
<div id="anzeigen">mein text <img ...> </div>


das ganze lässt sich beliebig erweitern und auf quasi alles übertragen
Nach oben
Benutzer-Profile anzeigen Private Nachricht senden Website dieses Benutzers besuchen MSN Messenger
Katharina



Anmeldungsdatum: 07.01.2006
Beiträge: 4

BeitragVerfasst am: 11.01.2006 22:16:41    Titel: Antworten mit Zitat

Sorry aber langsam habe ich das dumpfe Gefühl, dass ihr mich nicht versteht. Ich habe kein Problem mit dem Anzeigen an sich. Das geht auf alle möglichen Weisen!
Es geht darum, dass ich ALLE Bilder auf einem Hintergrundbild in einer Tabelle positionieren will, dass aber bis jetzt nur über ein Imagemap gehen würde, ich aber keine Ahnung habe wie ich Bilder dort einbauen soll, dass sie am Ende dann auch an Ort und Stelle sind. Ich habe jetzt schon alles mögliche probiert, aber es geht eben nicht. Ich verweise noch einmal auf meine Beispielseite in meinem oberen; zweiten Beitrag. Die erste Grafik (Allgemeine Informationen) Ist an der richtigen Stelle, die Zweite aber (das Bild was da so traurig unten rumhängt) Soll eigentlich auch auf die Skizze auf der das erste Bild ist. Dafür brauche ich ne Lösung. Bis jetzt hats nicht geklappt. Mit noch keinem Vorschlag. Weder mit dem, was ich probiert habe, noch mit den Euren. Ich vermute es liegt an den Tabelleneigenschaften. Man kann einfach nicht mehrere Bilder über Positionsangaben positionieren. (siehe Code)
Fazit:
Ich brauche ne Lösung wie ich mehrere Grafiken auf eine Hintergrundgrafik bekomme und das möglichst einfach.
Oder jemanden, der mir einfach sagen kann wie ich eine Grafik in ein Imagemap einbinde, dass sie genau auf der Verweisfläche erscheint.
Ich bin echt verzweifelt, weil ich jetzt schon google durchsucht, ungefähr zwanzig Möglichkeiten ausprobiert habe und immer noch zu keiner brauchbaren Lösung gekommen bin. Deshalb schreibe ich ja hier rein, weil ich denke, dass ihr um ein Hundertfaches mehr auf dem Kasten habt, als ich und das eigentlich für euch ein Kinderspiel sein müsste dafür eine Lösung zu finden.
Ich bin wirklich fürs Lernen und auch fürs selber Rausfinden, aber irgendwann, nach einer Woche vergeblichem Probierens, hat man einfach die Schnauze voll. Da will man, dass es endlich geht. Bis das nicht funktioniert komme ich mit meiner Seite nicht weiter und das frustet schon gewaltig.
Nach oben
Benutzer-Profile anzeigen Private Nachricht senden
Datarunner



Anmeldungsdatum: 25.01.2007
Beiträge: 1

BeitragVerfasst am: 25.01.2007 01:26:27    Titel: Antworten mit Zitat

Hallo,
also wenn ich das jetzt richtig verstanden habe willst Du mehrere Bilder positionieren, irgendwo auf einem anderen Bild?

Ich habe mal etwas programmiert, damit kann man kleine Icons auf einer Landkarte positionieren. Die kleinen Icons sind zwar so Reißzwecken ("schwarzes Brett"), aber es spricht ja nichts dagegen statt der Reißzwecken etwas Größeres zu nehmen Smile

Ich habe Dir die Datei als Attachment an die Nachricht gehängt. Du kannst Dir sie auch ziehen unter
http://www.supermo.de/bildanbild.zip.

Hier ist die Demo für die Reißzwecken auf den Bildern:
http://www.supermod.org/community/index.php?board=6;action=display;threadid=2845;start=0;boardseen=1

Das ist der Sourcecode dazu:

Code:

<body>
<table align="center" cellpadding="2" cellspacing="2" Border="0">
      <tr><td style="background-color: <; border: 1px solid <; padding: 5px; text-align: center;">Bild über Bild
      </td></tr>
      <tr><td style="background-color: <; border: 1px solid <;">
      <div style="overflow: hidden; position: relative;"><img src="Darmstadt.JPG" title="noresize" style="z-index: 0; position: relative;"/><div onmouseover="this.T_BGCOLOR='#5997ef';return escape('Written by Datarunner:<img src=\'http://mks.antville.org/static/mks/images/mathildenplatz.jpg\'>')"><img src="bmark.gif" style="z-index: 1; position: absolute; top: 443px; left: 54px;"  border="0" /></div><div onmouseover="this.T_BGCOLOR='#5997ef';return escape('Written by Datarunner:<img src=\'http://www.proregio-darmstadt.de/sehenswertes/bilder/teehaus1.gif\'>The tea house. I promise the garden is worth a visit.')"><img src="bmark.gif" style="z-index: 2; position: absolute; top: 165px; left: 273px;"  border="0" /></div><div onmouseover="this.T_BGCOLOR='#5997ef';return escape('Written by Datarunner:Another point of view by french tourists<img src=\'http://marquinhos-fafa.chez.tiscali.fr/herrngarten1.jpg\'>')"><img src="bmark.gif" style="z-index: 3; position: absolute; top: 194px; left: 290px;"  border="0" /></div><div onmouseover="this.T_BGCOLOR='#5997ef';return escape('Written by Datarunner:<img src=\'http://www.goldene-krone.de/abikrone.jpg\'>')"><img src="bmark.gif" style="z-index: 4; position: absolute; top: 681px; left: 286px;"  border="0" /></div><div onmouseover="this.T_BGCOLOR='#5997ef';return escape('Written by Datarunner:The castle, prince Charle even has visited this place. The police is located in there.<img src=\'http://www.igd.fhg.de/archive/1995_www95/darmstadt/Arrival/Schloss.gif\'>')"><img src="bmark.gif" style="z-index: 5; position: absolute; top: 630px; left: 227px;"  border="0" /></div><div onmouseover="this.T_BGCOLOR='#5997ef';return escape('Written by Datarunner:When you take a look from this bird-position, it looks like that:<img src=\'http://www.schlierundpartner.de/Referenzen/kurz-referenzen/Images/Image43.jpg\'>')"><img src="bmark.gif" style="z-index: 6; position: absolute; top: 705px; left: 222px;"  border="0" /></div><div onmouseover="this.T_BGCOLOR='#5997ef';return escape('Written by Datarunner:<img src=\'http://www.landhausamweinberg.de/Luftbilder/Luisenplatz.jpg\'>')"><img src="bmark.gif" style="z-index: 7; position: absolute; top: 590px; left: 35px;"  border="0" /></div><div onmouseover="this.T_BGCOLOR='#5997ef';return escape('Written by Datarunner:<img src=\'http://www.hessenbild.de/gallery/images/A-Da-0003.jpg\'>')"><img src="bmark.gif" style="z-index: 8; position: absolute; top: 241px; left: 288px;"  border="0" /></div><div onmouseover="this.T_BGCOLOR='#5997ef';return escape('Written by Datarunner:This is the school way to my school<img src=\'http://www.lio-darmstadt.de/images/schule.gif\'>SCHULESCHULESCHUKLE')"><img src="bmark.gif" style="z-index: 9; position: absolute; top: 116px; left: 3px;"  border="0" /></div><a href="javascript:viewProfile()"><img src="cpin.gif" id="pin" style="z-index: ; position: absolute; visibility: hidden; top: 10; left: 10;" border="0" alt="" /></a></div>
      </td></tr>
</table>
<script language="JavaScript" type="text/javascript" src="wz_tooltip.js"></script>
</body>


Enthält onmouseover-Geschichten. Um zu zeigen wie man auf die Bilder noch zusätzlich Tooltips setzen kann. Jedenfalls ist es mit diesem Quellcode möglich Bilder irgendwohin auf das Bild zu setzen und wenn der Cursor auf dem Bild ist sogar noch zusätzlich Bilder als Tooltips festzulegen. Die Positionierung der Bilder auf der Karte geschieht anhand von so was:
Code:

style="z-index:1; position:absolute; top:187px, left:201px


Ich hoffe dass ich die original Nachricht richtig verstanden habe und das die Antwort auf Deine Frage ist.
Wenn Du Dich registriert hast kannst Du mit diesem Link selbst Reißzwecken auf dem Bildschirm festsetzen
http://www.supermod.org/community/index.php?board=6;action=meetingedit;threadid=2845;mapid=2

Ansonsten bitte unbedingt die .zip Datei ziehen und test.html ausführen.

Ciao
Datarunner
Nach oben
Benutzer-Profile anzeigen Private Nachricht senden
Beiträge der letzten Zeit anzeigen:   
Neues Thema eröffnen   Neue Antwort erstellen    HTMLWorld Foren-Übersicht
   HTML
Alle Zeiten sind GMT + 1 Stunde
Seite 1 von 1

 
Gehe zu:  
Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst deine Beiträge in diesem Forum nicht bearbeiten.
Du kannst deine Beiträge in diesem Forum nicht löschen.
Du kannst an Umfragen in diesem Forum nicht mitmachen.