Hogyan tudom ezt az "effektet" létrehozni? Akár dreamweaver-ben?
jQueryvel meg lehetne oldani, de ahhoz nem értek. Az lenne az alapkoncepció, hogy mikor egy képre ráhúzom az egeret, az elhalványul(!) és előtűnik egy szöveg. (ez a kép/szöveg átmenetű dolog ugyebár mindvégig egy link volna.
Dreamweaverben van ilyen megoldás? Elvileg azzal könnyebb lenne.
HTML-kódokkal próbáltam megoldani, de az onMouseOver-onMouseOut kombinációnál nem elhalványul hanem éles átmenettel szövegre vált az objektum...
válasza:styleba hover+opacity,
a szöveg meg abs fölé?
válasza:pl.:
<style>
#elemID {
position: relative;
display: block;
width: 160px;
height: 120px;
}
.kep {
position: absolute;
top: 0px; left: 0px;
z-index: 1;
display: block;
width: 160px;
height: 120px;
opacity: 1;
}
.text {
position: absolute;
top: 47%; left: 0px;
z-index: 2;
display: block;
width: 160px;
text-align: center;
color: #000000;
opacity: 0;
}
</style>
<a id="elemID"><img src="http://significantobjects.edublogs.org/files/2011/01/jeffersons-acorn-2jfliao.jpg" class="kep" /><span class="text">Szöveg</span></a>
<script>
$('#elemID').hover(
function () {
$(this).children('.kep').animate({'opacity':'0.3'},500);
$(this).children('.text').animate({'opacity':'1'},500);
},function () {
$(this).children('.kep').animate({'opacity':'1'},500);
$(this).children('.text').animate({'opacity':'0'},500);
});
</script>
válasza:Vagy sima CSS -el ha a DocType engedi:
<style>
#elemID {
position: relative;
display: block;
width: 160px;
height: 120px;
}
.kep {
position: absolute;
top: 0px; left: 0px;
z-index: 1;
display: block;
width: 160px;
height: 120px;
opacity: 1;
}
.text:hover { opacity: 0.3; }
.text {
position: absolute;
top: 47%; left: 0px;
z-index: 2;
display: block;
width: 160px;
text-align: center;
color: #000000;
opacity: 0;
}
.text:hover { opacity: 1; }
</style>
<a id="elemID"><img src="http://significantobjects.edublogs.org/files/2011/01/jeffersons-acorn-2jfliao.jpg" class="kep" /><span class="text">Szöveg</span></a>
Köszönöm a segítséget, biztos működik.
Bár ez így elsőre egy kicsit bonyolultnak..tűnik. (nekem)
Kapcsolódó kérdések:
Minden jog fenntartva © 2024, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!