Hallo! =)
Ich möchte über eine Navigation den Content meiner Seite steuern, der sich auch nur auf dieser einen Seite befinden soll.
Also per Klick sollen quasi alle Elemente (bilder, texte, etc.) der kategorien typography, graphic design, photography, etc... ein- und ausgeblendet werden...
Die Navigation steht bereits:
http://dl.dropbox.com/u/25710505/neu/neu.html
bei click auf "photography" soll z.b. das eulenbild ausgeblendet (display: none, nicht hidden) werden.
Mache ich das über booleans? (Habe diese bereits angelegt, einige haben einen false-wert als default, da sie bei öffnen der seite zunächst ausgeblendet sein sollten)
Wenn ja, wie steuer ich das, über eine function?
wie muss diese eingefügt werden?
Ich freue mich sehr über jede Hilfe!
vielen Dank!
=)
nina
----------------------------------------------------------------------
<html>
<head>
<script language="JavaScript" version="1.4">
typo = new Boolean (true);
graphic = new Boolean (true);
photo = new Boolean (true);
inter = new Boolean (true);
illu = new Boolean (true);
about = new Boolean (true);
contact = new Boolean (false);
impress = new Boolean (false);
blog = new Boolean (false);
function swap(imgId, pId, boolean) {
var p = document.getElementById(pId);
p.className = (p.className == "menu_unselected") ? "menu_selected" : "menu_unselected";
var img = document.getElementById(imgId);
//img.src = (img.src == "buttons/Checkbox_unchecked.jpg") ? "buttons/Checkbox_checked.jpg" : "buttons/Checkbox_unchecked.jpg";
if (p.className == "menu_unselected") {
img.src = "buttons/Checkbox_unchecked.jpg";
boolean = false;
}else{
img.src = "buttons/Checkbox_checked.jpg";
boolean = true;
}
}
</head>
<body>
<header>
<nav>
<ul id="ul_one">
<li>
<div onClick="swap('imgTypo', 'pTypo', 'typo')">
<img id="imgTypo" style="float:left; width:15px; " src="buttons/Checkbox_checked.jpg" width="15" height="15" />
<p id="pTypo" class="menu_selected" style="width: 130px; margin-left: 22px;">typo/editorial</p>
</div>
...
...
...
<img class="Photography" src="images/eulen.jpg" width="278" height="150" />
...