QUOTE(nives @ 26 Mar 2007, 22:17 )
aber wenn ein flash-player kein standard ist, dann sollte man sowieso mal seine pc durchchecken lassen... (finde ich)
Meinst du damit einen Searchbot, Handy oder anderes portables Gadget? Deshalb heisst es auch User-Agent und nicht Browser - es gibt viele Möglichkeiten.
Ich hab mal die beiden hauptsächlichen Effekte nachgebaut:
1) Text einblenden wenn man über etwas drüberfahrt mit nach unten klappen
2) Bild beim drüber fahren austauschen (die Polygone die dann blinken)
Schaut dann mal so schnell getippt so aus:
CODE
<style>
#link1, #link2 { display: block; width: 50px; height: 50px; }
#link1 *, #link2 *{ display: none; }
#link1 { background: url('http://www.technoboard.at/style_emoticons/default/biggrin.gif') no-repeat 50% 50%; }
#link1:hover { background: url('http://www.technoboard.at/style_emoticons/default/alien.gif') no-repeat 50% 50%; }
#link2 { background: url('http://www.technoboard.at/style_emoticons/default/closedeyes.gif') no-repeat 50% 50%; }
#link2:hover { background: url('http://www.technoboard.at/style_emoticons/default/sleeping.gif') no-repeat 50% 50%; }
#link2:hover { background: url('http://www.technoboard.at/style_emoticons/default/sleeping.gif') no-repeat 50% 50%; }
#text { display: none; overflow: hidden; width: 200px; position: absolute; top: 10px; right: 10px }
#link2:hover #text { display: block }
</style>
<script>
var text_height = 300;
var text_steps = 50;
var text_step_time = 10;
var text_step_current = 0;
var text_timeout;
function text_step() {
var el = document.getElementById('text');
el.style.height = (text_height * (text_step_current / text_steps)) + 'px';
if (text_step_current < text_steps) {
text_step_current++;
text_timeout = window.setTimeout('text_step()', text_step_time);
}
}
function text_animate() {
text_step_current = 0;
var el = document.getElementById('text');
el.style.height = 0;
el.style.display = 'block';
text_step();
}
function text_stop() {
window.clearTimeout(text_timeout);
document.getElementById('text').style.display = 'none';
}
</script>
<a id="link1" href="#"><span>link 1</span></a>
<a id="link2" href="#" onmouseover="text_animate()" onmouseout="text_stop();"><div id="text">
Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ...
Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ...
Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ...
Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ...
Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ...
Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ...
Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ...
Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ...
Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ...
Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ...
Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ...
Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ...
Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ... Lorem Ipsum ...
</div></a>
Geht so auch noch mit einem User-Agent der kein Javascript kann und auch mit einem der kein CSS mehr kann - im Grunde braucht man also nur HTML und alles andere ist Eye-Candy.
Vielleicht mal ein Anreiz zu schauen was es sonst noch so gibt und geht.