Bild mit onclick

Kalito

Erfahrenes Mitglied
Ich habe folgenden Code

Code:
    <script language="JavaScript" type="text/javascript">

    function CheckRadio()
    {
    //Modell
      if (document.getElementById('mann').checked==true)
      {
        document.getElementById('M').style.display = 'block';
        document.getElementById('F').style.display = 'none';
      }
      if (document.getElementById('frau').checked==true)
      {
        document.getElementById('M').style.display = 'none';
        document.getElementById('F').style.display = 'block';
      }
    }
   //-->
    </script>

                    <div>

                        <ul>
                            <li><input type="radio" name="geschlecht" id="mann" onclick="javascript:CheckRadio('M');" checked="checked" />Mann</li>
                            <li><input type="radio" name="geschlecht" id="frau" onclick="javascript:CheckRadio('F');" />Frau</li>
                        </ul>
                    </div>

                    <div id="M" style="display:block;">
                        Mann
                    </div>
                    <div id="F" style="display:none;">
                        Frau
                    </div>

Inwieweit muss ich mein JS-Teil umbauen, das ich anstatt der 2 radiobutton 2 Bilder verwenden kann.

Wenn ich Frau klicke, soll das div Frau sichtbar werden und bei Mann das div mann halt


Folgender code hat nicht geklappt

Code:
    <script language="JavaScript" type="text/javascript">

    function CheckRadio()
    {
    //Modell
      if (document.getElementById('mann').checked==true)
      {
        document.getElementById('M').style.display = 'block';
        document.getElementById('F').style.display = 'none';
      }
      if (document.getElementById('frau').checked==true)
      {
        document.getElementById('M').style.display = 'none';
        document.getElementById('F').style.display = 'block';
      }
    }
   //-->
    </script>
<div>

                        <button type="button" id="mann" onclick="javascript:CheckRadio('M');">
                            <img src="mann.jpg" width="106" height="109" alt="Mann" />
                        </button>
                        <button type="button" id="frau" onclick="javascript:CheckRadio('F');">
                            <img src="frau.jpg" width="106" height="109" alt="frau"/>
                        </button>
                    </div>

                    <div id="M" style="display:block;">
                        Mann
                    </div>
                    <div id="F" style="display:none;">
                        Frau
                    </div>
 

CPoly

Mitglied Weizenbier
Du übergibst ja beim onclick den passenden Parameter. Den musst du dann nur benutzen.

Javascript:
function CheckRadio(id)
{
    document.getElementById(id).style.display = 'none';

    //Das jeweils andere wieder sichtbar machen
    document.getElementById( (id === 'M' ? 'W' : 'M') ).style.display = 'block';
}
 

CPoly

Mitglied Weizenbier
Ja, es muss natürlich ein "F" anstelle des "W" sein ;)

Javascript:
(id === 'M' ? 'F' : 'M')
 

tombe

Erfahrenes Mitglied
@CPoly: so klappt bei mir der Wechsel auch nicht richtig.


So geht es auf jeden Fall:

HTML:
<script language="JavaScript" type="text/javascript">

function CheckRadio(id) {
if (id == "M") {
    document.getElementById('M').style.display = 'block';
    document.getElementById('F').style.display = 'none';
}

if (id == "F") {
    document.getElementById('M').style.display = 'none';
    document.getElementById('F').style.display = 'block';
}
}

</script>

<div>
    <img src="mann.jpg" width="106" height="109" alt="Mann" id="mann" onclick="javascript:CheckRadio('M');"/>
    <img src="frau.jpg" width="106" height="109" alt="frau" id="frau" onclick="javascript:CheckRadio('F');"/>
</div>

<div id="M" style="display:block;">
    Mann
</div>
<div id="F" style="display:none;">
    Frau
</div>
 

CPoly

Mitglied Weizenbier
Interessant, da ich es 1zu1 in eine Textdatei kopiert habe.

HTML:
<!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" lang="en" xml:lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	
	<title>Page title</title>
</head>

<body>
	<script type="text/javascript">
	function CheckRadio(id)
	{
		document.getElementById(id).style.display = 'block';
		
		//Das jeweils andere wieder sichtbar machen
		document.getElementById( (id === 'M' ? 'F' : 'M') ).style.display = 'none';
	}
	</script>
	<div>
	<button type="button" id="mann" onclick="javascript:CheckRadio('M');">
		<img src="mann.jpg" width="106" height="109" alt="Mann" />
	</button>
	<button type="button" id="frau" onclick="javascript:CheckRadio('F');">
		<img src="frau.jpg" width="106" height="109" alt="frau"/>
	</button>
	</div>

	<div id="M" style="display:block;">
		Mann
	</div>
	<div id="F" style="display:none;">
		Frau
	</div>
</body>

</html>
 

tombe

Erfahrenes Mitglied
Komisch, wenn ich jetzt den obigen Code nehme, dann klappt es bestens.

Vielleicht lag es zuerst an der (relativ) frühen Uhrzeit oder es liegt am Regen (oder womöglich doch an mir?).