• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Text hervorheben + Grafik und Text anzeigen bei mousover

D

Dizzy

Neues Mitglied
Hallo zusammen.

Ich bin neu hier, und was HTML, CSS etc. angeht noch völlig unwissend, lasse mich aber nicht davon abhalten mir eine Website zu basteln. :)
Aufgrund meiner Unkenntnis nutze ich eine "Baukastenwebsite" von Jimdo. Alles ist mit diesem Baukasten nicht möglich (z. B. PHP), für meine bescheidenen Ansprüche hat es aber bislang immer gereicht - bis jetzt.


Nun möchte ich folgendes umsetzen, weiß aber nicht wie ich das bewerkstelligen kann. Vielleicht könnt ihr mir helfen:


Ich habe 2 Spalten. In der linken ist eine Liste mit 19 Begriffen; in der rechten Spalte passend dazu eine Grafik.

1.jpg


Wenn man nun mit der Maus über einen der Begriffe fährt, soll:

1. Der Begriff rot eingefärbt werden.

2. Die Grafik durch eine andere erstzt werden. (Die das entsprechnde Teil im Bild hervorhebt)

3. ein passender Text zum Begriff erscheinen. Wenn möglich unterhalb der Grafik.

Beispiel Rahmen
2.jpg

Beispiel Reifen
3.jpg



Könnt ihr mir erklären wie ich das umsetzen kann?


Ich habe vorher die Forumssuche mit den Begriffen 'Mousover' und 'Text Hover' benutzt aber nichts passendes gefunden. Leider weiß ich auch nicht ob dies mit HTML möglich ist. Falls ich also im falschen Forenbereich bin bitte verschieben.


Vielen Dank fürs Helfen!
 
Vielen Dank für die schnelle Hilfe, Yastynu!
Hast du auch eine Idee wie ich den Text entsprechend anzeigen lassen kann?
 
Ich weiß zwar dass CSS für Cascading Style Sheets steht, aber das wars auch schon. Sorry. :oops:
Kannst du mir für mein Anliegen auch ein Tutorial verlinken oder mir sagen wonach ich suchen muss?
 
das Schlüsselwort ist hover.
Der CSS-Code (gehört in den Head) :

<style type="text/css">
/* <![CDATA[ */
p#text1 { color:red; }
p#text1:hover { color:green; }
/* ]]> */
</style>


der HTML-Code (gehört in den Body):

<p id="text1">ich bin text1!</p>


wenn du das jetzt beliebig erweiterst, kannst du so Bilder ein- und ausblenden.
 
Ich glaub ich hab mich zum Schluss falsch ausgedrückt, sorry. Was ich mit "den Text entsprechend anzeigen lassen" meinte, war die Anzeige des Textes unterhalb der Grafik. Also das Einblenden der Erläuterung wenn ein Bestimmter Begriff augewählt wurde.

Das Beispiel von dir Bisi ist für das Texteinfärben wenn man mit der Maus drüber fährt, oder?
 
Wegen des Textes unter dem Bild such mal nach "CSS Tooltip". Du positionierst den Bereich, in dem die Liste steht relativ, und beim hovern erscheint dann ein absolut positionierter Text (von der Funktion her ein Tooltip), den du mit left und top so ausrichten kannst, dass er unter dem Bild erscheint.

Meiner Meinung nach geht auch das mit dem Bildwechsel mit CSS. Du ersetzt das Bild in dem img-Tag durch ein png-Bild mit den gleichen Abmessungen, das vollständig transparent ist. Nun kannst du dem Bild als background im CSS das Standardbild zuweisen. Wenn nun über den Text gehvert wird, wird ein entsprechend anderes Bild eingeblendet.
ist ein bisschen kompliziert, dafür musst du das Bild sozusagen als Unterelement der Liste deklarieren, ich weiß nicht, wie weit dir Jimdo da freie Hand lässt (mit CSS3 geht es glaube ich auch einfacher, unterstützen nur noch nicht viele...)

Ich hoffe, ich konnte dir etwas weiterhelfen, ich schaue nachher nochmal vorbei, tippe momentan nur am iPod......

Edit:
Die CSS3 Lösung:
HTML: 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Unbenanntes Dokument</title>
</head>
<style type="text/css">
#image{
    position:relative;
}
#abc{
    z-index:10;
    position:absolute;
}
#a,#b,#c{
    visibility:hidden;
    position:absolute;
}
#a:target, #b:target, #c:target{
    visibility:visible;
    z-index:50;
}
</style>
<body>
<div id="content">
<ul>
<li><a href="#a">A</a></li>
<li><a href="#b">B</a></li>
<li><a href="#c">C</a></li>
</ul>
 </div>
 <div id="image">
 <img src="abc.jpg" width="400" height="400" id="abc">
 <div id="a"><img src="a.jpg" width="400" height="400">Hallo, A</div>
 <div id="b"><img src="b.jpg" width="400" height="400">Hey, B</div>
 <div id="c"><img src="c.jpg" width="400" height="400">Und C</div>
 </div>
</body>
</html>
Wobei ich es da nicht hinbekomme, den "aktiven" Link hervorzuheben...

Edit2: Bei der Lösung ohne CSS3 hänge ich gerade, aber vielleicht hilft dir das ja als Ansatz?
 
Zuletzt bearbeitet:
Das meinte ich auch mit beliebig erweitern: Du kannst nicht nur den Text rot einfärben, sondern alles was in diesem Element #text1 vorhanden ist, verändern ... hier ein anderes Beispiel:

Hier wird, wenn du auf den Text fährst, ein weiterer angezeigt:

CSS:
HTML: 
<style type="text/css">
        div#elm1:hover div#elm2 { display:block; }    /* fahre ueber dieses element elm1 ... */
                                                /* ... und dir wird elm2 angezeigt */

        div#elm2 { display:none; position:absolute;}    /* elm2 muss standartmaessig ausgeblendet sein */
</style>

HTML:
HTML: 
<div id="elm1">
    <p>fahre mit der Maus &uuml;ber mich :-)</p>
    <div id="elm2">
        <p>hallo, ich bin eingeblendet</p></div>
    </div>
</div>

Wichtig ist hier: dass es verschachtelt ist. elm2 kann nur von elm1 sichtbar gemacht werden, da es ein Kindelement von ihm ist.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben