On my character creation page, I have a dropdown list with all the available races listed and a radio_button to select gender. Below that, I have a DIV section where I want to display 3 avatar images for the user to choose from, based on those selections.
As the player selects a race from the dropdown list, or changes the radio button for gender, I would like to update the 3 avatar images that are displayed below to match the avatars for that race/gender. For instance, if the player selects 'Dwarf' and 'Male" I update the DIV to show 3 male dwarf avatar images. Does that make sense?
Anyone know how I could achieve this? Would it take some javascript code attached to the dropdown list and radio button? Anyone know of a tutorial that would point me in the right direction?
Thanks
Changing part of a page based on dropdown selection
Re: Changing part of a page based on dropdown selection
Never tried it in html (or php-generated html), but thinking from the ActionScript perspective it certainly looks like you have to have a 'holder' div(s) and a function that will load images to that div and which will be triggered each time a value in dropdown/radio is changed. I've found this on quick search (uses javascript):
in html:
javascript:
in html:
Code: Select all
// the myfunction() can be added to dropdown options line, I guess, this uses simple link
<a href="javascript:myfunction();">Click me!</a>
// obviously, you can add more id's/holders (3, as you say)
<div id="imageHolder">this is where the image will show</div>
Code: Select all
<script type="text/javascript">
function myfunction(){
// this would thus be multiplied 2 more times for each of the holders you need
document.getElementById("imageHolder").innerHTML="<img src='imagefolder/imagename.jpg' alt=''/>";
}
</script>
Re: Changing part of a page based on dropdown selection
Sorry for doubleposting.
Yeah, since you need an image that depends on both the race and the gender, I suggest you name your images something like:
- dwarfMale.gif
- dwarfFemale.gif
- humanMale.gif
- humanFemale.gif etc
and from dropdown that driggers js function you can pass the first part "race=dwarf" and from radio button pass the "gender=Male" to function that will then load an image:
Yeah, since you need an image that depends on both the race and the gender, I suggest you name your images something like:
- dwarfMale.gif
- dwarfFemale.gif
- humanMale.gif
- humanFemale.gif etc
and from dropdown that driggers js function you can pass the first part "race=dwarf" and from radio button pass the "gender=Male" to function that will then load an image:
Code: Select all
"<img src='imagefolder/'"+race+gender+".gif' alt=''/>"
Re: Changing part of a page based on dropdown selection
Sorry for triple posting xD
made this, works nice:
[ Used some online images and uploaded them to one of my sites, just copy/paste code to see how it works ]
made this, works nice:
Code: Select all
<html>
<head>
<title>Testing</title>
<script type="text/javascript">
function passRaceGender(race,gender){
if(race!="None" & gender!="None"){
document.getElementById("imageHolder").innerHTML="<img src='http://nihilant.host22.com/IndieResources/"+race+gender+".png' alt=''/>";
}
}
</script>
</head>
<body>
<div>
<form name="form1">
<select name="selectRace" onchange="passRaceGender(this.value,form2.selectGender.value);">
<option value="None">Select Race</option>
<option value="Dwarf">Dwarf</option>
<option value="Human">Human</option>
<option value="Elf">Elf</option>
</select>
</form>
</div>
<div>
<form name="form2">
<select name="selectGender" onchange="passRaceGender(form1.selectRace.value,this.value);">
<option value="None">Select Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</form>
</div>
<div id="imageHolder">this is where the image will show</div>
</body>
</html>
Last edited by Nihilant on Thu Aug 09, 2012 2:03 am, edited 1 time in total.