Responsive web design (RWD) provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors)
I was interested in creating responsive webpage image without use of Javascript,I found few interesting links and hence I am sharing it here.This page is created using the normal HTML5 and CSS3
Here JPG image is positoned relative to the screen.There are eight hotspots created on each animals.For each hotspots the dimensions are specified in <style> tag
<style>
.hotspot {left: 7%;
top: 11%;
width: 20%;
height: 26%;}</style>
This webpage is easy to create. It supports IE7+, Firefox, Chrome, Safari, Opera, iOS and Android OS, including Touch Screen Devices
GiraffeGiraffes are the tallest land animals.There neck and feet are 6 feet long.A male giraffe can weigh as much as a pick up truck!
LionLions are the second largest big cat species in the world.The roar of a lion can be heard from 8 kilometers away.In the wild, they rest for around 20 hours a day!
CraneCranes are large, long-beaked birds.They are an omnivorous bird.They can grow to an average of 1 meter in height.They are quiet agile flyers!
ZebraZebras are members of the horse family. They have excellent hearing and eyesight and can run at speeds of up to 35 miles per hour.Zebras communicate with facial expressions and sounds.
ButterflyButterflies are insects.They sip nectar, sap, and juices from fruit.They often have brightly coloured wings with unique patterns made up of tiny scales.
HippopotamusThe name "hippopotamus" comes from Greek words meaning "water or river horse"!.Their eyes, ears, and nostrils are on top of their head. They can see, hear, and breathe while most of their body is underwater.