Skip to content

Browse Pics using PHP

September 11, 2013

The code can change pictures in order when the button is clicked. Simple. There are 3 pics of tigers that is set to the example.You can edit to change the pic and change the number of images when you understand how the code works. We use CSS, HTML, and PHP in this post. Extract the codes to your server.

HTML CODE

  1. <html>
  2. <head>
  3. <title>
  4. <!– title, the images are transparent using photoshop –>
  5. change pics (transparent)
  6. </title>
  7. <link rel = “stylesheet” type = “text/css” href = “style.css”>
  8. <style>
  9. <!– sets the body to color black –>
  10. body
  11. {
  12. background-color:black;
  13. }
  14. </style>
  15. </head>
  16. <body>
  17. <!– this shows the php image in the header
  18. positioned and sized in the css–>
  19. <div id=”header”></div>
  20. <div id=”pics”>
  21. <!– sets a definite size of the images –>
  22. <img width= 500 height =350 align=”middle” src=”
  23. <!– php code that determine which image to show –>
  24. <?php
  25. // if the button is clicked, the $_GET
  26. // will not be empty
  27. if(!empty($_GET[‘image’]))
  28. // returns to the first image when its
  29. // value is 4, there’s no image in 4
  30. if($_GET[‘image’] == 4)
  31. $image = 1;
  32. else
  33. $image = $_GET[‘image’];
  34. // this outputs the default image, 1
  35. else
  36. $image = 1;
  37. // outputs the $image as a source/src
  38. echo $image;
  39. ?>
  40. <!– continues the src code –>
  41. .png” >
  42. </div>
  43. <!– the div is positioned in the css –>
  44. <div id=”button”>
  45. <!– this sets the link to the next image –>
  46. <a href = “index.php?image=
  47. <?php
  48. // set the value of $_GET for the value to
  49. // the next image
  50. echo $image + 1;
  51. ?>
  52. ” >
  53. <!– size and source for the button of the link –>
  54. <img width= 120 height =50 align=”middle” src=”button.png” >
  55. </a>
  56. </div>
  57. </body>
  58. </html>

Below is the code for the style of the page.

CSS CODE

  1. #pics
  2. {
  3. margin: 9px 0 0 25%;
  4. }
  5. #button
  6. {
  7. margin: 11px 0 0 44%;
  8. }
  9. #header
  10. {
  11. background-image: url(header.jpg);
  12. width: 98%;
  13. height: 198px;
  14. border: 8px inset #534D72;
  15. /*+placement:margin-auto 0px 0px;*/
  16. margin-left: auto;
  17. margin-right: auto;
  18. position: relative;
  19. left: 0px;
  20. top: 0px;
  21. }

Here’s the snapshot of the page.

Simple, Free Image and File Hosting at MediaFire

DOWNLOAD COMPLETE CODES HERE

Advertisements

From → CSS, HTML, PHP

One Comment
  1. arielthekillers permalink

    Reblogged this on Arielthekillers's Blog.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

TurtleAndRobot.com

Children's Book Reviews

Malav Shah

official Web Site

My Road to Programming

The journey of how I taught myself to program.

paritoshmishra

Look at what's brewing up guys! we all are work in progress. So don't meander, lets micromesh everything and have candid conversation about every problem related to C, C++ and JAVA. We can rejuvenate the crinkled faces.

ProgramThat;

A simple guide to programming...

ITechonology

Information Techonology

Rahul's Work

My Work Tips and Tutorial on Various Tech.

Turnip Farmers

Kingdom Scans

Gigaom

Technology news, trends and analysis covering mobile, big data, cloud, science, energy and media

HarsH ReaLiTy

A Good Blog is Hard to Find

VentureBeat

News About Tech, Money and Innovation

retireediary

The Diary of a Retiree

50 Year Project

My challenge to visit 192 countries, read 1,001 books, and watch the top 100 movies

[BTW] : Ben Trube, Writer

Writer, Programmer, Singer

My Arch Walkthrough

Arch linux made easy

Don Charisma

because anything is possible with Charisma

SutoCom Solutions

Success & Satisfaction with the Cloud

%d bloggers like this: