Sven Mintel
Mitglied
Jo..kann man, .... ändere den className des betreffenden Elementes statt der src des Bildes. Dann definiere noch die entsprechenden Klassen, fertitsch.
Folge dem Video um zu sehen, wie unsere Website als Web-App auf dem Startbildschirm installiert werden kann.
Anmerkung: Diese Funktion ist in einigen Browsern möglicherweise nicht verfügbar.
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>