Gruppen
- Top Gruppen
- Betriebsysteme
- Windows classik
- Linux
- BS-Sonstige
- Software
- Datenbanken
- Bildbearbeitung
- Audio/mp3/Video
- Security/Viren
- SW-Sonstige
- Hardware
- Mainboard/CPU
- Grafikkarten
- Peripherie
- Laptop/Notebook
- HW-Sonstiges
- Netzwerk
- Telefon,ISDN,Modem
- W-Lan
- NW-Sonstiges
- Programmierung
- PHP,ASP,Perl...
- Java,C++...
- Webseiten/HTML
- Sonstiges
- PC-Sonstiges
- Plauderecke
- SN Intern
- Test
/ Forum / Webseiten/HTML
Webseiten/HTML
Fragevon Orthoh vom 26.09.2019, 12:02 Options
Links in ein Bild einbauen
Hallo Zusammen!
Ich habe Folgendes Problem,und zwar sieht das Loginbild zu meinen Foren zur Zeit so auswww.guldans-seele.de
Ich möchte nun die links,die unter dem Bild stehen,in Dieses einbauen!
Das soll dann so aussehen,das die links nur dann zu sehen sind,wenn man mit dem Mauszeiger drüberfährt! Die links sollen jeweils rechts und links in den Fenstern des Bildes untergebracht werden.
Kann mir da jemand nen tip geben,wie das funktioniert,da ich von dieser materie keine Ahnung habe! Ich habe zwar im selfhtml Forum geschaut,aber irgendwie nix passendes gefunden:
Mfg Björn
Ich habe Folgendes Problem,und zwar sieht das Loginbild zu meinen Foren zur Zeit so auswww.guldans-seele.de
Ich möchte nun die links,die unter dem Bild stehen,in Dieses einbauen!
Das soll dann so aussehen,das die links nur dann zu sehen sind,wenn man mit dem Mauszeiger drüberfährt! Die links sollen jeweils rechts und links in den Fenstern des Bildes untergebracht werden.
Kann mir da jemand nen tip geben,wie das funktioniert,da ich von dieser materie keine Ahnung habe! Ich habe zwar im selfhtml Forum geschaut,aber irgendwie nix passendes gefunden:
Mfg Björn
Antwort 3 von dummchen vom 26.09.2019, 14:52 Options
Hallo,
die Idee ist nicht schlecht und der Hinweis von hmmm_tja dafür auch praktisch,aber woher weis man dann daß da Links sind?
Bei ner Landkarte würd ich das vielleicht in Erwägung ziehen.
gruß
dummchen
die Idee ist nicht schlecht und der Hinweis von hmmm_tja dafür auch praktisch,aber woher weis man dann daß da Links sind?
Bei ner Landkarte würd ich das vielleicht in Erwägung ziehen.
gruß
dummchen
Antwort 4 von MixMax vom 26.09.2019, 15:15 Options
kannst doch den Text mit einem Bildverarbeitungsprogramm ins bild einbauen und so hervorheben das es wie ein button oder link aussieht...
alternative:
mache eine Tabelle und das Bild (was übrigens eine grottenschlechte auflösung hat, spielst mit 320x240?) als hingergrund einbinden und dann hast den text vorm bild.
http://de.selfhtml.org/css/eigenschaften/hintergrund.htm#background...
wird meist jedoch mit endlosbildern die sich aneinander anfügen lassen verwendet und seltener mit ingamegrafiken.
alternative:
mache eine Tabelle und das Bild (was übrigens eine grottenschlechte auflösung hat, spielst mit 320x240?) als hingergrund einbinden und dann hast den text vorm bild.
http://de.selfhtml.org/css/eigenschaften/hintergrund.htm#background...
wird meist jedoch mit endlosbildern die sich aneinander anfügen lassen verwendet und seltener mit ingamegrafiken.
Antwort 5 von derpfleger vom 26.09.2019, 15:46 Options
Hi Orthoh,
damit deine Startseite sicher funktioniert, müsstest du erst mal eine ordentliche, den Formen genügende Seite daraus machen.
Dein Quelltext sieht bislang so aus:
Da fehlts erst mal am Grundgerüst:
Um aus deinem Bild eine verweis-sensitive Grafik (=Imagemap, siehe Antwort 1) zu machen, müsstest du dein Bild mit absoluter Höhen- und Breitenangabe versehen, sonst ist überhaupt nicht abzusehen, wo der link sitzen wird, denn den link in einer verweis-sensitiven Grafik musst du ja irgendwo pixelgenau platzieren.
Den Bereich, den du so definierst, kannst du am einfachsten mit dem title-Tag kenntlich machen: wenn man mit der Maus darüberfährt ändert sich nicht nur der Mauszeiger, sondern es öffnet sich auch ein kleiner Tooltip (so ein kleines gelbes PopUp) mit dem unter dem titel-Tag vergebenen Text.
Es gäbe auch noch eine Javascript-Lösung, mit der du mit einem Hover-Effekt (überfahren mit der Maus) einen Bildwechsel erzeugst und so diesen Bereich als link-Fläche kenntlich machst. Ist natürlich bei einem bildschirmfüllenden Bild etwas seltsam.
Gruß derpfleger
damit deine Startseite sicher funktioniert, müsstest du erst mal eine ordentliche, den Formen genügende Seite daraus machen.
Dein Quelltext sieht bislang so aus:
<img src="http://www.guldans-seele.de/Bilder/Maid.jpg" width="100%" height="100%" alt="Alliance of Gul`dan">
<a href="./eqdkp/">Aog Raidforum</a>
<br />
<a href="./forum/">AoG Gildenforum und Raidbewerbungen</a>Da fehlts erst mal am Grundgerüst:
<html>
<head>
<title></title>
</head>
<body>
</body>
</html> Um aus deinem Bild eine verweis-sensitive Grafik (=Imagemap, siehe Antwort 1) zu machen, müsstest du dein Bild mit absoluter Höhen- und Breitenangabe versehen, sonst ist überhaupt nicht abzusehen, wo der link sitzen wird, denn den link in einer verweis-sensitiven Grafik musst du ja irgendwo pixelgenau platzieren.
Den Bereich, den du so definierst, kannst du am einfachsten mit dem title-Tag kenntlich machen: wenn man mit der Maus darüberfährt ändert sich nicht nur der Mauszeiger, sondern es öffnet sich auch ein kleiner Tooltip (so ein kleines gelbes PopUp) mit dem unter dem titel-Tag vergebenen Text.
Es gäbe auch noch eine Javascript-Lösung, mit der du mit einem Hover-Effekt (überfahren mit der Maus) einen Bildwechsel erzeugst und so diesen Bereich als link-Fläche kenntlich machst. Ist natürlich bei einem bildschirmfüllenden Bild etwas seltsam.
Gruß derpfleger
Antwort 6 von Orthoh vom 26.09.2019, 16:31 Options
Danke erstmal für die hilfe! Ich habe mich jetzt den ganzen tag damit beschäftigt,aber ich bin wohl zu blöd das zu verstehen,aber man muss ja nicht alles können:P
Zitat:
Um aus deinem Bild eine verweis-sensitive Grafik (=Imagemap, siehe Antwort 1) zu machen, müsstest du dein Bild mit absoluter Höhen- und Breitenangabe versehen, sonst ist überhaupt nicht abzusehen, wo der link sitzen wird, denn den link in einer verweis-sensitiven Grafik musst du ja irgendwo pixelgenau platzieren.
Den Bereich, den du so definierst, kannst du am einfachsten mit dem title-Tag kenntlich machen: wenn man mit der Maus darüberfährt ändert sich nicht nur der Mauszeiger, sondern es öffnet sich auch ein kleiner Tooltip (so ein kleines gelbes PopUp) mit dem unter dem titel-Tag vergebenen Text
Kann mir wer sowas schreiben? Ich bin da wie gesagt zu blöde zu.Habe alles schon versucht,gott sei dank mit einer Test index datei,das wäre ja sonst völlig in die hose gegangen.
PhPbb lass ich mir ja noch gefallen,aber html ist nicht nur eine nummer zu gross für mich
Mfg Orthoh
Zitat:
Um aus deinem Bild eine verweis-sensitive Grafik (=Imagemap, siehe Antwort 1) zu machen, müsstest du dein Bild mit absoluter Höhen- und Breitenangabe versehen, sonst ist überhaupt nicht abzusehen, wo der link sitzen wird, denn den link in einer verweis-sensitiven Grafik musst du ja irgendwo pixelgenau platzieren.
Den Bereich, den du so definierst, kannst du am einfachsten mit dem title-Tag kenntlich machen: wenn man mit der Maus darüberfährt ändert sich nicht nur der Mauszeiger, sondern es öffnet sich auch ein kleiner Tooltip (so ein kleines gelbes PopUp) mit dem unter dem titel-Tag vergebenen Text
Kann mir wer sowas schreiben? Ich bin da wie gesagt zu blöde zu.Habe alles schon versucht,gott sei dank mit einer Test index datei,das wäre ja sonst völlig in die hose gegangen.
PhPbb lass ich mir ja noch gefallen,aber html ist nicht nur eine nummer zu gross für mich
Mfg Orthoh
Antwort 7 von dummchen vom 26.09.2019, 21:33 Options
also will heute noch ne soziale Tat begehen ;-)
schau dir das mal an und beachte die Zipfelmütze und den 2.Link darfst du suchen :
http://home.arcor.de/la/lang.ho/verweissensitiv/Test.htm
oder vielmehr den Quelltext.
Was zwischen <!-- und --> steht, sind Kommentare innerhalb des Quelltextes.
Ich habe dabei lediglich einen Teil des Quelltextes des Links aus der Antwort von hmm_tja rauskopiert...
Die "richtige" Größe deines Bildes wäre übrigens754 auf 570 Pixel. Dargestellt wird es mit 1239 auf 570.
ich dachte schon, du meinst php. Dann hätt ich fast gern getauscht ;-)
Freu mich auf ne Antwort...
schau dir das mal an und beachte die Zipfelmütze und den 2.Link darfst du suchen :
http://home.arcor.de/la/lang.ho/verweissensitiv/Test.htm
oder vielmehr den Quelltext.
Was zwischen <!-- und --> steht, sind Kommentare innerhalb des Quelltextes.
Ich habe dabei lediglich einen Teil des Quelltextes des Links aus der Antwort von hmm_tja rauskopiert...
Die "richtige" Größe deines Bildes wäre übrigens754 auf 570 Pixel. Dargestellt wird es mit 1239 auf 570.
Zitat:
PhPbb lass ich mir ja noch gefallen,aber html ist nicht nur eine nummer zu gross für mich
PhPbb lass ich mir ja noch gefallen,aber html ist nicht nur eine nummer zu gross für mich
ich dachte schon, du meinst php. Dann hätt ich fast gern getauscht ;-)
Freu mich auf ne Antwort...
Antwort 8 von derpfleger vom 26.09.2019, 23:10 Options
@Orthoh:
Wobei in diesem Beispiel die Grafikdatei so heisst: maidtest.jpg
Gruß derpfleger
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Zentrieren</title>
<style type="text/css">
body {background-color:#000000;}
#zentriert {
position: absolute;
top: 50%;
left: 50%;
width: 754px;
height : 570px;
margin-top: -285px;
margin-left: -377px;
border:0px solid #000000;
padding:10px;
overflow:auto;
}
-->
</style>
</head>
<body>
<div id="zentriert">
<img src="maidtest.jpg" width="744px" height="560px" alt="" usemap="#imagemaptest">
<map name="imagemaptest">
<area shape="rect" coords="494, 427, 734, 461"
href="http://www.guldans-seele.de/eqdkp/" alt="Aog Raidforum" title="Aog Raidforum">
<area shape="rect" coords="462, 478, 734, 515"
href="http://www.guldans-seele.de/forum/" alt="AoG Gildenforum und Raidbewerbungen" title="AoG Gildenforum und Raidbewerbungen">
</map>
</div>
</body>
</html>Wobei in diesem Beispiel die Grafikdatei so heisst: maidtest.jpg
Gruß derpfleger
Antwort 9 von derpfleger vom 26.09.2019, 23:16 Options
Hilft natürlich nix ohne die Grafikdatei: guckst du hier
Antwort 10 von Orthoh vom 27.09.2019, 15:03 Options
Danke für eure Hilfe!! Echt super support hier!!
@derPfleger
GAnz dickes dankeschön,auch wenn du warscheinlich deine ganze Garage damit schon voll hast. Find ich voll super,das du dir die zeit genommen hast!!!
@dummchen
Also einer alten Dame brauchst heute nicht mehr über die Strasse Helfen,die gute tat hast schon vollbracht. Der 2 Link ist übrigens im Linken Flügel vom Drachen:P
Bin absolut begeister vom support hier,echte spitzenklasse!!!
Mfg Björn
@derPfleger
GAnz dickes dankeschön,auch wenn du warscheinlich deine ganze Garage damit schon voll hast. Find ich voll super,das du dir die zeit genommen hast!!!
@dummchen
Also einer alten Dame brauchst heute nicht mehr über die Strasse Helfen,die gute tat hast schon vollbracht. Der 2 Link ist übrigens im Linken Flügel vom Drachen:P
Bin absolut begeister vom support hier,echte spitzenklasse!!!
Mfg Björn
Antwort 11 von derpfleger vom 27.09.2019, 17:17 Options
@ Orthoh: du hast meinen Vorschlag ja schon (fast) 1zu1 übernommen :-) .
Das ist vollkommen OK, war auch so gedacht, falls es dir gefällt.
Viel Spass weiterhin mit deiner Seite.
Gruß derpfleger
Das ist vollkommen OK, war auch so gedacht, falls es dir gefällt.
Viel Spass weiterhin mit deiner Seite.
Gruß derpfleger
Antwort 12 von dummchen vom 27.09.2019, 17:43 Options
@ Orthoh:
danke fürs feedback.
Gut erkannt der 2.Link und die alte Dame habe ich heute stehengelassen. ;-)
danke fürs feedback.
Gut erkannt der 2.Link und die alte Dame habe ich heute stehengelassen. ;-)
Antwort 13 von derpfleger vom 27.09.2019, 17:53 Options
@ dummchen: du hast mit deinem Beispiel auch sehr schön gezeigt wie problematisch es ist, wenn man verweis-sensitive Grafiken bastelt, ohne dass deren Funktionalität im Bild zu erkennen wäre. Ich hab mir nen Wolf gesucht, um den zweiten link zu finden und musste schliesslich im Quelltext nachschauen um drauf zu stossen :-)
Gruß derpfleger
Gruß derpfleger
Antwort 14 von dummchen vom 27.09.2019, 22:02 Options
@ derpfleger
haha, na soo klein war der Link auch wieder nicht und war ja nur als Späßle gedacht. Bild doppelt so groß und Link mit ein paar Pixel, könnt ich's nachvollziehen :-))
fand es übrigens prima, daß nach meinem kleinen Beispiel du dir auch noch die Mühe gemacht hast.
Sonst sind es meist nur (teilweise) kommentarlos eingestellte Links und damit sind oft viele PC-Neulinge überfordert.
Zitat:
Ich hab mir nen Wolf gesucht, um den zweiten link zu finden
Ich hab mir nen Wolf gesucht, um den zweiten link zu finden
haha, na soo klein war der Link auch wieder nicht und war ja nur als Späßle gedacht. Bild doppelt so groß und Link mit ein paar Pixel, könnt ich's nachvollziehen :-))
fand es übrigens prima, daß nach meinem kleinen Beispiel du dir auch noch die Mühe gemacht hast.
Sonst sind es meist nur (teilweise) kommentarlos eingestellte Links und damit sind oft viele PC-Neulinge überfordert.
Antwort 15 von Orthoh vom 03.10.2019, 11:01 Options
Auch von meiner seit nochmal vielen danke für die Erklährung und die Beispiele,so kann man sich das auch mal anschauen und steht da nicht vor wie ein Schwein vorm Uhrwerk^^
Habe das 1-1 übernommen,da es genau das war,was ich mir vorgestellt habe.
Auch danke das Beispiel mit den versteckten links,da wird das suchen auf ner Seite zum gedultspiel,und es geht ja nun darum,Mitglieder und Benutzer eines Forums zu erfreuen und ihnen den schnellsten weg in die gewünschten Bereiche des Forums zu zeigen,und nicht eben Frust aufkommen lassen,weil sie noch ewig die passenden links suchen müssen.
Vielen dank nochmal
Orthoh
Habe das 1-1 übernommen,da es genau das war,was ich mir vorgestellt habe.
Auch danke das Beispiel mit den versteckten links,da wird das suchen auf ner Seite zum gedultspiel,und es geht ja nun darum,Mitglieder und Benutzer eines Forums zu erfreuen und ihnen den schnellsten weg in die gewünschten Bereiche des Forums zu zeigen,und nicht eben Frust aufkommen lassen,weil sie noch ewig die passenden links suchen müssen.
Vielen dank nochmal
Orthoh
Ähnliche Themen
Bild beim Überfahren eines Textlinks anzeigen
sutadur 04.01.2007 - 139 Hits - 15 Antworten
Wie herum Netzteil einbauen?
Olli2007 16.04.2007 - 133 Hits - 5 Antworten
blödes div problem^^
some1unknown 02.05.2007 - 103 Hits - 2 Antworten
Auf was für Seiten kann mann gut links einbauen ?????
barnieboy1 22.08.2007 - 41 Hits - 4 Antworten
Hyperlinks in Excel?
mikeonenine 27.06.2008 - 46 Hits -
Hinweis
Diese Frage ist schon etwas älter, Sie können daher nicht mehr auf sie antworten. Sollte Ihre Frage noch nicht gelöst sein, stellen Sie einfach eine neue Frage im Forum..
Neue Einträge
