Forums

anthonylimere

Hello css-tricks forum, I will be posting my first question!

I'd like to have my image to send a link to another page with php filtering on a list, but I can't even make the basic link.. so I'm quite confused.

This is my website (still making the design) www.diablo-movies.com

This is the code

<div class="content2">
                                	<h4>Classes</h4>
                                    <ul id="classes" style="height:605px;">
                                    <li class="barbarian"><img src="barbarianclass.png" width="288" height="120" class="barbarianimg"/></li>
                                    <li class="monk"><img src="monkclass.png" width="288" height="120" class="monkimg"/></li>
                                    <li class="wizard"><img src="wizardclass.png" width="288" height="120" class="wizardimg"/></li>
                                    <li class="demonhunter"><img src="demonhunterclass.png" width="288" height="120" class="demonhunterimg"/></li>
                                    <li class="witchdoctor"><img src="witchdoctorclass.png"  width="288" height="120" class="witchdoctorimg"/></li>
                                    </ul>
</div>

Thanks!

ps : this is the css code linked to each image

img.barbarianimg {
							margin-bottom:1px;
							cursor:pointer;
							
						}
						
						img.monkimg {
							margin-bottom:1px;
							cursor:pointer;
						
						}
						
						img.wizardimg {
							margin-bottom:1px;
							cursor:pointer;
						
						}
						
						img.demonhunterimg {
							margin-bottom:1px;
							cursor:pointer;
						
						}
						
						img.witchdoctorimg {
							margin-bottom:1px;
							cursor:pointer;
						
						}

Blackhawkso

@antonylimere I'm a little confused is what your wanting the site to do is if someone clicks to say there a wizard it would then load the page with items that are to do with being a wizard. If that's right all you really need to do to your code is this.

<div class="content2">
                                	<h4>Classes</h4>
                                    <ul id="classes" style="height:605px;">
                                    <li class="barbarian"><a href="./phpfile.php?class=barbarian"><img src="barbarianclass.png" width="288" height="120" class="barbarianimg"/></a></li>
                                    <li class="monk"><a href="./phpfile.php?class=monk"><img src="monkclass.png" width="288" height="120" class="monkimg"/></li>
                                    <li class="wizard"><a href="./phpfile.php?class=wizard"><img src="wizardclass.png" width="288" height="120" class="wizardimg"/></li>
                                    <li class="demonhunter"><a href="./phpfile.php?class=demonhunter"><img src="demonhunterclass.png" width="288" height="120" class="demonhunterimg"/></li>
                                    <li class="witchdoctor"><a href="./phpfile.php?class=witchdoctor"><img src="witchdoctorclass.png"  width="288" height="120" class="witchdoctorimg"/></li>
                                    </ul>
</div>

Then at the top of the targeted php file you add the following code.

$class = $_GET['class'];

and then you will have the selected class in a php string to do what ever you want with it.

hope this helps.

anthonylimere

This helped quiete much, thank you!

Blackhawkso

No problems

treehouse : what would you like to learn today?

Forums

Onclick event or just a href on images?