Sven Mintel
Mitglied
Jo..kann man, .... ändere den className des betreffenden Elementes statt der src des Bildes. Dann definiere noch die entsprechenden Klassen, fertitsch.
Follow along with the video below to see how to install our site as a web app on your home screen.
Anmerkung: This feature currently requires accessing the site using the built-in Safari browser.
document.getElementById('idDesElements').className='andererKlassenname';
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
#nav01 .normal,
#nav02 .normal{
color: #f00;
}
#nav01 .active,
#nav02 .active{
color: #00f;
}
#nav01 .hover,
#nav02 .hover{
color: #0f0;
}
-->
</style>
<script type="text/javascript">
<!--
function qpMenu(options){
var menu = {
pattern: /(normal|hover|active)/i
};
for(var key in options)
menu[key] = options[key];
menu.btns = (menu.id===undefined)? document.getElementsByTagName("body")[0].getElementsByTagName("button")
: document.getElementById(menu.id).getElementsByTagName("button");
for(var b=0, bLen=menu.btns.length; b<bLen; b++){
menu.btns[b].onmouseover = function(){
if(menu.clicked != this){
this.className = this.className.replace(menu.pattern, 'hover');
}
};
menu.btns[b].onmouseout = function(){
if(menu.clicked != this){
this.className = this.className.replace(menu.pattern, 'normal');
}
};
menu.btns[b].onclick = function(){
if(menu.clicked){
menu.clicked.className = menu.clicked.className.replace(menu.pattern, 'normal');
}
this.className = this.className.replace(menu.pattern, 'active');
menu.clicked = this;
};
}
}
window.onload = function(){
qpMenu({
id: 'nav01'
});
qpMenu({
id: 'nav02'
});
}
//-->
</script>
</head>
<body>
<div id="nav01">
<button class="normal">eins</button>
<button class="normal">zwei</button>
<button class="normal">drei</button>
</div>
<div id="nav02">
<button class="normal">eins</button>
<button class="normal">zwei</button>
<button class="normal">drei</button>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
#nav01 .normal{
color: #f00;
}
#nav01 .active{
color: #0f0;
}
#nav01 .hover{
color: #00f;
}
#nav02 .eins,
#nav02 .zwei,
#nav02 .drei{
border: 1px solid #000;
}
#nav02 .eins{
width: 50px;
height: 20px;
}
#nav02 .zwei{
width: 60px;
height: 30px;
}
#nav02 .drei{
width: 40px;
height: 40px;
}
#nav02 .eins.normal{
color: #f00;
background: url(bild1.png) 0 0 no-repeat;
}
#nav02 .zwei.normal{
color: #0f0;
background: url(bild2.png) 0 0 no-repeat;
}
#nav02 .drei.normal{
color: #00f;
background: url(bild3.png) 0 0 no-repeat;
}
#nav02 .eins.active{
color: #000;
background: url(bild1_active.png) 0 0 no-repeat;
}
#nav02 .zwei.active{
color: #0cf;
background: url(bild2_active.png) 0 0 no-repeat;
}
#nav02 .drei.active{
color: #fc0;
background: url(bild3_active.png) 0 0 no-repeat;
}
#nav02 .eins.hover{
color: #cc0;
background: url(bild1_hover.png) 0 0 no-repeat;
}
#nav02 .zwei.hover{
color: #c0c;
background: url(bild2_hover.png) 0 0 no-repeat;
}
#nav02 .drei.hover{
color: #0cc;
background: url(bild3_hover.png) 0 0 no-repeat;
}
-->
</style>
<script type="text/javascript">
<!--
function qpMenu(options){
var menu = {
pattern: /(normal|hover|active)/i,
tag: 'button'
};
for(var key in options)
menu[key] = options[key];
menu.btns = (menu.id===undefined)? document.getElementsByTagName("body")[0].getElementsByTagName(menu.tag)
: document.getElementById(menu.id).getElementsByTagName(menu.tag);
for(var b=0, bLen=menu.btns.length; b<bLen; b++){
menu.btns[b].onmouseover = function(){
if(menu.clicked != this){
this.className = this.className.replace(menu.pattern, 'hover');
}
};
menu.btns[b].onmouseout = function(){
if(menu.clicked != this){
this.className = this.className.replace(menu.pattern, 'normal');
}
};
menu.btns[b].onclick = function(){
_setActive(this);
};
}
// private
var _setActive = function(menuItem){
if(menu.clicked){
menu.clicked.className = menu.clicked.className.replace(menu.pattern, 'normal');
}
menuItem.className = menuItem.className.replace(menu.pattern, 'active');
menu.clicked = menuItem;
}
// public
menu.setActive = function(index){
_setActive(menu.btns[index]);
return menu;
}
return menu;
}
window.onload = function(){
qpMenu({
id: 'nav01',
tag: 'button'
});
qpMenu({
id: 'nav02',
tag: 'div'
}).setActive(0);
}
//-->
</script>
</head>
<body>
<div id="nav01">
<button class="normal">eins</button>
<button class="normal">zwei</button>
<button class="normal">drei</button>
</div>
<div id="nav02">
<div class="eins normal">eins</div>
<div class="zwei normal">zwei</div>
<div class="drei normal">drei</div>
</div>
</body>
</html>