Suche im Forum:
Suchen


Autor Nachricht
Beitrag12.02.2015 um 01:00 (UTC)    
Titel: Details zu Bildern

Hallo hoffe das mir jemand helfen kann.
Ich möchte auf meiner Seite zu den Bildern Details machen die durch einen klick erscheinen weiß aber nicht wie das heißt und wie das geht.

Hoffe es kann mir jemand helfen

Gruß Chris
Beitrag12.02.2015 um 09:19 (UTC)    
Titel: Tooltip Fenster / Hover

Hi Chris,

eine Möglichkeit bietet sich mit dem "Tooltip" - Fenster.
Wenn die Maus das Bild berührt (Hover) , öffnet sich ein kleines Textfeld, das dann gewünnschte Infos anzeigt.



Tooltip-Fenster:
- gehe auf "Extras"
- aktiviere Extra "Eigener <head> Inhalt"
- dort folgenden CSS Code einfügen
Zitat:

<style type="text/css">
<!--


.info {cursor: help; }

/* Aussehen Tooltip Fenster */
.info span {
position: absolute;
width: 200px;
color: #000000;
padding: 15px;
margin-top: XXXpx;
margin-left: -XXXpx;
background-color: #FFFFFF;
border: 1px solid #c9c9c9;
visibility: hidden; }

/* bei Mauskontakt sichtbar */
.info:hover span { visibility: visible; }

-->
</style>


Bei margin-top: ersetze XXX durch die Höhe deines Bildes.
Bei margin-left: ersetze -XXX durch die Breite deines Bildes (das Minuszeichen stehen lassen)
Damit setzt sich das Tooltip-Fenster genau unter dem Bild.
Hintergrundfarbe bei background-color wählen.
Textfarbe kannst Du bei color bestimmen.
Die Breite für das Info-Fenster bei width: anpassen.

Im Seiteninhalt wird nun der HTML-Code eingefügt.
Der gewünschte Infotext wird im HTML-Code zwischen <span> und </span> platziert :

Zitat:

<a class="info"><img src="Grafikadresse" alt="Bild" /><span> Hier Dein Info-Text </span></a>



Alternativ kann auch kurzer Text in das Bild einfahren, wenn Maus das Bild berührt. Bildinfo bei Mauskontakt einfahren

Gruß Wolle


Zuletzt bearbeitet von clean-test am 12.02.2015, 12:54, insgesamt 5-mal bearbeitet
Beitrag12.02.2015 um 12:34 (UTC)    
Titel:

Ok vllt habe ich mich nicht richtig ausgedrückt Wink was ich suche ist eher so wie auf der Seite http://www.hannover-indians.de/indians/team wenn ich das Bild anklicke das sich dann ein neues Fenster mit Details öffnet.

Aber Trotzdem schonmal Danke

Gruß Chris
Beitrag12.02.2015 um 12:53 (UTC)    
Titel:

Hallo,

- dazu einfach eine neue Seite erstellen
- die neue Seite bekommt die gewünschten Infos
- Und das Bild verlinkst Du dann mit der neuen Seite
- dazu das eingefügte Bild mit der Maus einmal anklicken
- und dann oben im Editor auf das Symbol "Erdkugel"
- dann öffnet sich ein kleines Fenster, wo du die Linkadresse einfügst, wo der Link hinführen soll

Beispiel : Bild verlinken im Seiteninhalt



Die Seiten, welche die Infos zu den Bildern haben, sollen sicherlich nicht
zusätzlich in der Navigation auftauchen. Diese kannst Du im Menü verstecken,
mit dem Extra "versteckte Seiten".

Beschreibung dazu haben wir hier : Seiten in der Navigation verstecken

Gruß Wolle


Zuletzt bearbeitet von clean-test am 12.02.2015, 13:57, insgesamt einmal bearbeitet
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de