Bild vergrößer/Link ist area
0 0 
rfb
Bild vergrößer/Link ist area
Hallo,
ich hab etwas gegooglet und diese nette Methode gefunden Bilder zu vergrößern. Ich möchte ausgehend von einem Bild verschiede Bereich im Bild definieren die sich dann mit einem "mouseover" vergrößern lassen.
Hier mal das zugehörige CSS:
a.info{
position:relative;
z-index:1;
color:#000;
text-decoration:none
}
a.info:hover{
z-index:2;
}
a.info span{
display: none;
}
a.info:hover span{
display:block;
position:absolute;
top:75px;
left:5px;
background-image:url(bildgross.JPG);
width:150px;
height:56px;
}
und in HTML dann so:
<a class="info" href="#"><img src="bildklein.jpg" width="200" height="80" border="0" alt="">
<span></span></a>
Das geht auch gut nur hatte ich mir eben gedacht, dass ich das gerne mehrfach auf das selbe Bild anwende und einfach areas definiere. Nur leider war das wohl zu einfach gedacht...
jemand ne Ahnung wie man sowas machen könnte? Wenn nicht so geht es vielleicht anders? Mir ist halt wichtig, dass das vergrößerte Bild über dem Text und anderen Bildern liegt.
-
Hallo,
Das geht auch gut nur hatte ich mir eben gedacht, dass ich das gerne mehrfach auf das selbe Bild anwende und einfach areas definiere. Nur leider war das wohl zu einfach gedacht...
ohne es jetzt ausprobiert zu haben, sehe ich da keine Schwierigkeit.
Wie sah denn dein Versuch mit den areas aus?
Jeder area-Link bekäme eine eigene Klasse, und damit würde die Bildgröße definiert ...Gruß plan_B
--
*®*´¯`·.¸¸.·-
Moin
das Konzept funktioniert mit a, weil a einen span enthält, auf den per CSS eingewirkt wird. area ist aber inhaltsleer, das Konzept lässt sich also nicht übertragen.
Gruß
rfb--
Man kann einen Menschen nichts lehren, man kann ihm nur helfen, es selbst zu entdecken.
(Galileo Galilei)-
Hallo rfb,
das Konzept funktioniert mit a, weil a einen span enthält, auf den per CSS eingewirkt wird. area ist aber inhaltsleer, das Konzept lässt sich also nicht übertragen.
danke für die Richtigstellung, erspart hoffentlich nicht nur mir sinnloses Austesten.
Wenn man denn unbedingt nach einer Lösung sucht, wird es mit javascript zu verwirklichen sein.
<area ... onmouseover="show(bild,width1,height1)">
<area ... onmouseover="show(bild,width2,height2)">Gruß plan_B
--
*®*´¯`·.¸¸.·
-
-