Website-Lupe - (4) Gezielt Zoomen

  • Sie suchen einen flexiblen Weg, ZoomWerte zuzuweisen? Hier ist er: Eine Funktion übernimmt die ID eines HTML-Elements und einen Zoom-Faktor. Danach bringt sie das Element auf die gewünschte Größe. So sieht der Quelltext aus: <html>/head><script>function zoomIt(idname. Faktor){eval(idname+".style.zoom="+faktor);}</script><title>Testseite css</title></head><body><p ID="hallo"onMouse0ver="zoomIt('wichtig', 1.2)“onMouseOut="zoomIt('wichtig',1)",Wichtig</p><p ID="hallo"onMouse0ver="zoomIt('unwichtig', 0.8)" onMouseOut="zoomIt('unwichtig', 1)",Unwichtig</p><p>Hier ist ein kleiner Text mit <span ID='>wichtigen</span> Anmerkungen, zum beispiel einer Hervorhebung. Dazu gibt es aber auch herrlich <span ID='>unwichtig' unwichtige</span> Dinge </p></body></html> Die Funktion zoomt() besteht nur aus einer eval-Anweisung. Eval bietet den einfachsten Weg, die ID des Elements aus dem Funktionsaufruf zu übernehmen und in den Befehl einzubinden. Auch der gewünschte Zoom-Faktor findet so seinen Weg in die Zuweisung. Eval baut zunächst den String zusammen und wertet ihn dann als Javascript-Befehl aus. Der onMouse0ver-Event in den <p>-Tags ruft jeweils die Funktion auf und sagt ihr, welches Element auf der Seite gezoomt werden soll. Wichtig ist, dass die ID des betreffenden Elements stimmt - sonst meldet Javascript einen Fehler.