[JS] Pokazywanie/ukrywanie po id

0

Witam! Chciałbym osiągnąć efekt, w którym na stronie jest w pewnym miejscu standardowy tekst. Po nakierowaniu na button w menu, tekst ten miałby się zmieniać. Po zabraniu myszki z przycisku, powracałby standardowy tekst...

Ponoć jest to nie do zrobienia w czystym CSS, więc zabrałem się za JS... niestety, nieumiejętnie...:

Mamy sobie pole:

  
<span id="tekst_menu">To jest opis oryginalny, ogolny</span>
 <span id="opis_home" style="display:none"> To jest opis home</span>

I mamy przycisk:

<li><a onMouseOver="Show('opis_home')" onmouseout="Hide('opis_home')" href="#">Home</a></li>

A całość wspiera skrypt:

<script type="text/javascript">

function Hide(ref){
	document.getElementById(ref).style.display="none";
	document.getElementById('tekst_menu').style.display = "";
}


function Show(ref){
	document.getElementById('tekst_menu').style.display = "none";
	document.getElementById(ref).style.display = "";
}

</script>

Problem? Nie działa... ;-] Byłbym wdzięczny za ewentualne sugestie.

Pozdrawiam serdecznie,
Theriel

0

Jeśli dobrze zrozumiałem, można to zrobić następująco:

<html>
<head>
  <script>
    var texts = new Array("Normalny tekst","Opcja 1","Opcja 2","Opcja 3");
  
    function show(i)
	{
	  var obj = document.getElementById('text')
	  obj.innerHTML = texts[i];
	}
  </script>
</head>
<body>
<div id="menu">
  <a onmouseover="show(1)" onmouseout="show(0)" href="#">Opcja 1</a>
  <a onmouseover="show(2)" onmouseout="show(0)" href="#">Opcja 2</a>
  <a onmouseover="show(3)" onmouseout="show(0)" href="#">Opcja 3</a>
</div>
<div id="workarea">
  <p id="text">Normalny tekst</p>
</div>
</body>
</html>
0

Bo do pokazywania to używaj display: inline lub block (span domyślnie jest inline), a do chowania none :).

0

Nie ma sensu żonglować display. Są sytuacje, w których jest to przydatne, ale w tym wypadku nie widzę sensu. Dużo lepiej użyć atrybutu CSS visibility

1 użytkowników online, w tym zalogowanych: 0, gości: 1