Please enable JavaScript!
Bitte aktiviere JavaScript!
S'il vous plaît activer JavaScript!
Por favor,activa el JavaScript!
antiblock.org

{$debug=1} {if {$page_title}=="Orginaldesign ansehen"} {head} {/head} {elseif {$page_title}=="Orginaldesign mit Zusatz im Menu"} {head} {/head} {elseif {$page_title}=="Orginaldesign mit Fußleiste"} {head} {/head} {elseif {$page_url}|contains:'preview'}

Vorschau

{elseif {$page_url}|contains:'136'} {head} {/head} {else} {head} {/head}
{/if}

Tooltipp - Bild mit mouseover

Manchmal möchte man einen Link mit einem BIld verbinden, z.B. wenn Namen aufgezählt werden soll beim mouseover ein kleines Bild eingeblendet werden, so wie hier:

Link mit Bild als Tooltipp

Man kann das ganze auch so gestalten, dass der Text durch das Bild hindurchscheint, so wie hier


Link mit Bild als Tooltipp (durchsichtig)
Das Bild kann auch durchsichtig angezeigt werden. Dann kann man den Text darunter noch lesen.

Erklärung

Zunächst wird ein Tooltip-Element definiert. Mit display:none wird festgelegt, dass dieses Element normalerweise nicht sichtbar sein soll. Für tooltip_opac img, also das Bild mit Durchsichteffekt wird außerdem festgelegt, in welchem Maß der Hintergrund durchscheinen soll.


Mit einem kleinen JavaScript-Abschnitt wird außerdem festgelegt, dass das Bild erscheinen und wieder verschwinden soll.


Diese beiden Abschnitte kann man entweder im HTML-Modus in die einzelne Textseite einfügen oder wenn man den Tooltipp mit Bild auf mehreren Textseiten nutzen will unter Einstellungen >> Sitewide >> oben

Jetzt kommt die Festlegung der anzuzeigenden Bilder:



Der Klassenname ist entsprechend den vergebenen Definitionen zu vergeben. Natürlich können auch alle Bilder die Klasse tooltip oder tooltip_opac haben. Die vergebene ID (id="1") muss aber eindeutig sein.

Abschließen werden die Stellen festgelegt, an denen die Bilder angezeigt werden sollen:

Link mit Bild als Tooltipp
Link mit Bild als Tooltipp (durchsichtig)

Hier muss wieder auf die richtige ID in showBild('1') bzw. showBild('2') geachtet werden.

{if {$page_title}=="Orginaldesign ansehen"} {elseif {$page_title}=="Orginaldesign mit Zusatz im Menu"} {elseif {$page_title}=="Orginaldesign mit Fußleiste"}

In diese Fussleiste kann man allen möglichen Kram einbauen: Links zu anderen Website, irgendwelche Like-Buttons, die News, ja wahrscheinlich sogar das Kontaktformular. Das ist dann nur noch eine sache der Formatierung.

{else}

Kategorie: alle Artikel (2) | Diese Website (5) | NPage (2) | Webdesign (2)

Galerie in News (16.07.2013 12:22:00)

Kann man eine NPage galerie in die News einfügen? Ja, man kann. (mehr lesen...)

0 Kommentar(e), Kommentar verfassen
 
Neue CSS-Datei für Formularfelder (25.04.2013 07:49:00)

Vor kurzem habe ich festgestellt, dass es bei NPage eine neue CSS-Datei gibt, die automatisch in Webseiten eingebunden wird. (mehr lesen...)

0 Kommentar(e), Kommentar verfassen
 
{/if} Zum Seitenanfang