табове с промяна на цвят

Pussycat

Registered
Здравейте, трябва ми някое просто js, което да представлява нещо такова:
kutoh4.png

- Табове с различни цветове. При минаване на мишката в/у някой от тях да се променя цвета на голямото поле на такъв какъвто е и таба.
Както и да изписва даден текст.

:)
 
Не съм си играл да ги правя с табове, просто наметках няколко дива
Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title>Табове ;)</title>
		<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
		<script type="text/javascript">
		function changebackground(divid,glaven,text) {
			var bk = document.getElementById(divid).style.backgroundColor;
			var glaven = document.getElementById(glaven);
			glaven.style.background = bk;
			glaven.innerHTML = text;
		}
		</script>
	</head>
	<body>
		<div onmouseover="changebackground('id1','bashboxa','текст текст текст текст')" id="id1" style="width: 100px; height: 20px; background-color: #b90000; border: thin dotted #000000; float: left;">pole1</div>
		<div onmouseover="changebackground('id2','bashboxa','текст2 текст2 текст2 текст2')"id="id2" style="width: 100px; height: 20px; background-color: #a7a7a7; border: thin dotted #000000; float: left;">pole2</div>
		<div onmouseover="changebackground('id3','bashboxa','текст3 текст3 текст3 текст3')"id="id3" style="width: 100px; height: 20px; background-color: #00FF00; border: thin dotted #000000; float: left;">pole3</div>
		<br /><br />
		<div id="bashboxa" style="background-color: #fff; border: thin dotted #000000; width: 600px; height: 300px;">
		</div>
	</body>
</html>
демо -> http://scriptx.info/dmz/cvetni-tabove.html
Надявам се да съм ти помогнал :?:
 
Ее супер си !

Благодаря ти devent :wink:


а как ще стане по default някой от табовете да е отворен ?
и главното поле, да е свързано с "бутоните" ?
 

Back
Горе