Meine Frage des Tages:
Ich weise einem Marker ein Bild zu und verlinke dieses:
marks.M2.file = fileadmin/images/menu_projekte.jpg
marks.M2.wrap = <a href="/Typo3/dummy-3.8.0/?id=2"> |</a>
Ist es möglich da ein Rollover drüber zu machen ? - Dabei soll ein anderes Bild erscheinen....
Ich mache so was über CSS
Z.B.
CSS:
/* Definition des Hovereffekts beim Logo */
a .msglogo {
display: none;
}
a:hover .msglogo {
display: block;
}
a:hover .msglink {
display: none;
}
/*Ende der Definition beim MSG-Logo */
und im HTML dann:
<a href="http://www.msg.de/" target="_blank">
<span class="msglink"><img src="fileadmin/Giltemplate/Gillardon_dateien/msg-Hinweis.jpg" name="button" alt="" border="0" height="24" width="300" /></span>
<span class="msglogo"><img src="fileadmin/Giltemplate/Gillardon_dateien/msg-Hinweis_Logo.jpg" name="button" alt="" border="0" height="24" width="300" /></span>
Zuerst wird also das Bild mit dem der CSS-Class msglink angezeigt und sobald Du drüber gehst wird es ausgeblendet und msglogo angezeigt, einfach, gelle 🙂
genau - oder javascript direkt im img-tag..
Welche dhtml-Variante du bevorzugst ist dir überlassen =)
Also könnte ich quasi auch schreiben:
HTML:
<td>###M2###</td>
TS:
marks.M2.file = fileadmin/images/menu_projekte.jpg
marks.M2.wrap = <span class="anderesBild"><a href="/Typo3/dummy-3.8.0/?id=2"> |</a></span>
und im CSS:
a .anderesBild.hoover { background-image: url(fileadmin/images/menu_projekte.jpg_2); }
Richtig ???
1. leider nein. Wenn du ein Background-image im CSS und ein img-Tag im HTML benutzt, wirst du vom Background-image nicht viel sehen, wenn das img-tag einfach darüber liegen bleibt.
2. es heisst hover mit einem "o", ned hoover ;P des is evtl. holländisch *smile*
Mmmhh das löst ja dann leider mein Problem nicht. Da ich es nur über die Marker machen kann/ muss, wenn dann ! 😢
Klar geht das - Du musst halt zwei Marker setzen, in den ersten das ursprüngliche Bild, in den zweiten das Rolloverbild.
Und dann an das CSS anpassen. Schon müsste die Sache laufen 🙂
wieso überhaupt !?!?
Eine Klasse reicht doch! Ein Trick wäre doch kein img per HTML anzugeben, sondern nur einen nichthover- und einen hover-Background für die Klasse... Das Ganze klappt dann mit einem Marker!!
etwa so:
.myHoverClass {
background-image: url(pfad/defaultBild.jpg);
}
.myHoverClass hover {
background-image: url(pfad/anderesBild.jpg);
}
so in der Art.
Okay. Das werd ich morgen mal probieren.. DANKE sofern :o)
und sonst löst du es mit der JavaScript-Syntax via "onmouseover" und "onmouseout".