I'm trying to convert my current page to an AMP page but I'm having some trouble with onclick attributes.
Is there anyway to add that functionality in AMP page?
Below is the tag I want to convert;
<img src="theSrc"
alt=""
onclick="window.open('link', 'Popup','toolbar=no, location=no, statusbar=no, menubar=no, scrollbars=1, resizable=0, width=580, height=600, top=30')"
style="cursor:pointer"
id="someID"
/>
Your code seems that you want to show Image, Link and Popup
<img src="theSrc"
alt=""
onclick="window.open('link', 'Popup','toolbar=no, location=no, statusbar=no, menubar=no, scrollbars=1, resizable=0, width=580, height=600, top=30')"
style="cursor:pointer"
id="someID"
/>
You can achieve your goal by combination of amp-img, amp-lightbox and amp-iframe
Here is the working Url
Code :
<!doctype html>
<html amp>
<head>
<meta charset="utf-8">
<link rel="canonical" href="popup.html">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}#-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}#-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}#-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}#-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}#keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
<style amp-custom>
.lightbox {
background: rgba(0,0,0,0.8);
width: 580px;
height: 600px;
margin:30px auto;
padding:30px;
position:relative;
}
.close { position:absolute; right:5px; top:5px; color: red; font-family: arial; font-size: 25px;}
</style>
</head>
<body>
<amp-lightbox id="Popup" layout="nodisplay">
<div class="lightbox" >
<span class="close" on="tap:Popup.close" role="button" tabindex="0">X</span>
<amp-iframe width="580" title="Animated dancing GIF from Giphy"
height="600"
layout="responsive"
sandbox="allow-scripts allow-same-origin allow-popups"
frameborder="0"
src="https://giphy.com/embed/DKG1OhBUmxL4Q">
<amp-img layout="fill"
src="https://i.vimeocdn.com/video/536538454_640.webp"
placeholder></amp-img>
</amp-iframe>
</div>
</amp-lightbox>
<span class="ampstart-btn caps m2" on="tap:Popup" role="button" tabindex="0">
<amp-img src="https://dummyimage.com/200x50/ff0000/ffffff&text=Click+Here+Image" width="200" height="50" layout="fixed"></amp-img>
</span>
</body>
</html>
AMP allows an attribute 'on' inside which you can define various actions corresponding to supported events(see AMP Actions and Events). So your code should be something like:
<amp-img src=" "
alt=""
role=""
tabindex=""
on="tap: <your action here>"
style=" "
id=" "
>
<!-- 'role' and 'tabindex' attributes are mandatory when using 'on' attribute
in some html elements like Bachcha Singh pointed out in the comments.
Otherwise you will get AMP-validation errors -->
Do note that in AMP we need to use <amp-img> </amp-img> tags instead of <img /> tags. Also I believe you can't use window.open() since only few white listed javascript functions are allowed in AMP, although your desired functionality may be recreated using AMP logic.
Related
I created an AMP theme for my online shop.
What I need now is a popup/modal for newsletter subscription that will be automatically opened when a user access to the home-page.
I found the amp-lightbox component that seems ok for my purpose.
I used this example:
<amp-lightbox id="my-bindable-lightbox" data-amp-bind-open="showLightbox" layout="nodisplay" on="lightboxClose:AMP.setState({showLightbox: false})">
<div class="lightbox" role="button" tabindex="0" on="tap:my-bindable-lightbox.close">
<h1>Hello World!</h1>
</div>
</amp-lightbox>
<button on="tap:AMP.setState({showLightbox: true})">Open</button>
This work but the only thing I failed to do is set his state opened by default.
I tried changing the layout but nodisplay only is supported.
I also inspected the AMP.printState():
by default is null, when I click on the button to open the lightbox the state value is:
{"showLightbox": true}
So, last try I did is to set the default state
<amp-state id="showLightbox">
<script type="application/json">true</script>
</amp-state>
Now when I open the page and inspect AMP.printState() I see:
{"showLightbox": true}
But my lightbox still not showing until I click on the Open button.
I accept any solutions, other components or any workaround.
Create custom light-box
CSS
.custom-lightbox {
background: rgba(0,0,0,0.8);
width: 100%;
height: 100vh;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
}
.custom-lightbox h1 {
color: white;
}
HTML
<div class="custom-lightbox" tabindex="0" role="button" id="customLightbox" on="tap:customLightbox.hide">
<h1>Hello World!</h1>
</div>
<button on="tap:customLightbox.show">
Open Custom Lightbox
</button>
<!--
## Introduction
The [`amp-lightbox`](/content/amp-dev/documentation/components/reference/amp-lightbox-v0.1.md) component allows for a “lightbox” or similar experience - where upon user interaction a component expands to fill the viewport, until it is closed again by the user.
--><!-- -->
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<title>amp-lightbox</title>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<link rel="canonical" href="https://amp.dev/documentation/examples/components/amp-lightbox/index.html">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}#-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}#-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}#-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}#-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}#keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<style amp-custom>
.custom-lightbox {
background: rgba(0,0,0,0.8);
width: 100%;
height: 100vh;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
}
.custom-lightbox h1 {
color: white;
}
</style>
</head>
<body>
<!-- ## Basic usage -->
<!--
The `amp-lightbox` component defines the child elements that will be displayed in a full-viewport overlay.
To close the lightbox via click or tap use the `on` attribute on one or more elements inside the lightbox. In this example the user can click anywhere in the lightbox to close it.
The lighbox is shown when the user taps or clicks on an element with `on` attribute that targets the id of an `amp-lightbox` element.
-->
<div class="custom-lightbox" tabindex="0" role="button" id="customLightbox" on="tap:customLightbox.hide">
<h1>Hello World!</h1>
</div>
<button on="tap:customLightbox.show">
Open Custom Lightbox
</button>
</body>
</html>
I am basically trying to put an html frame within another html page. I tried to open the below site using iframe but no help. Please help me to open this site and also other ways apart from iframe to do this, also I wish to rewrite the html script later in R, so please suggest the suitable approach to follow. Thanks.
<!DOCTYPE html>
<html>
<body>
<base target="_blank">
<iframe>
src="google.com" height="200" width="300"
</iframe>
</body></html>
Update
<!DOCTYPE html>
<html>
<body>
<a href="http://www.google.com" target="_parent"><button>Click me !
</button></a>
</body></html>
This is an example how syntax for iframe looks.
<iframe width="100%" height="100%" src="https://www.google.co.za/" frameborder="0" scrolling="auto" allowfullscreen>
</iframe>
cant be implemented correctly since google not allowed in frame.
This would work for example :
<iframe width="100%" height="100%" src="https://www.rdocumentation.org/" frameborder="0" scrolling="auto" allowfullscreen>
</iframe>
R syntax:
iframe(width, height, url_link) //syntax
iframe(width = "560", height = "315", url_link = "https://www.youtube.com/embed/0fKg7e37bQE") //example
Here is the R documentation.
https://www.rdocumentation.org/packages/shinyLP/versions/1.1.0/topics/iframe
EXTRA
Read this about adding custom search from google Click Me
Implementing any fully functional website
To use the iframe in full perspective of the browser ill give you an example using your code:
Also included an button tag to open and close iframe.
$(document).ready(function() {
$(".btn").click(function() {
$("#frame").toggle();
});
});
.btn {color: black; background-color: #eee; height: 50px; width: 200px; border-radius: 10px;border-color: #96bdd9;box-shadow: inset 0 1px 0 #f4f8fb; margin-bottom: 20px;outline: none;}
.test {position: fixed; width: 100%; height: 100%; }
.test iframe { width: 100%; height: 100%; border: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<body>
<button class="btn" >Iframe Open & close</button>
<div class="test">
<iframe id="frame" style="display: none;" width="100%" src="https://getbootstrap.com/" frameborder="0" scrolling="auto">
</iframe>
</div>
</body>
</html>
You can’t show Google in an iframe.
You also can’t show Yahoo!, Twitter or Facebook in an iframe.
Most major sites and banks block this ability through the use of
X-Frame-Options: DENY
Read more here
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options
Ok, I want to display some text next to my pricetables. This text has a background that must be repeated across the entire page, thus outside the container. Atm, the text is behind it's background (thus not visible), and the background gets cutted at the edge of the container.
How can I edit this code so that I can see my text, and that the background overflows the edge of the container?
This is how it looks like right now:
preview http://piclair.com/data/1t2ri.jpg
My CSS:
.overflow {
margin:0 -400px;/* now equals 1600px wide */
min-height:213px;
background: url('/images/pakkettenbg.png') repeat-x;
position:relative;
z-index: 0;
overflow: visible;
}
#onside {position: relative; z-index: 1; margin-top: 124px; color: #8C8C8B;}
#logopakketten {position: relative; z-index: 1; margin-left: 158px; margin-top: -332px; min-width: 782px; overflow: visible;}
#orderbuttons {position: relative; z-index: 1; float: left; margin-left: 158px;}
And my HTML:
<div class="overflow">
<div id="onside">
<p>Unieke logo ontwerpen:</p>
<p>Levertijd:</p>
<p>Revisies:</p>
<p>Briefpapier ontwerpen:</p>
<p>Enveloppe ontwerpen:</p>
<p>Visitekaartje ontwerpen:</p>
<p>Bestandsformaten:</p>
</div>
</div>
<div id="logopakketten">
<img src="/images/logopakketten/Prijskolom%20S.png" alt="" />
<img src="/images/logopakketten/Prijskolom%20M.png" alt="" />
<img src="/images/logopakketten/Prijskolom%20L.png" alt="" />
<img src="/images/logopakketten/Prijskolom%20XXL.png" alt="" />
</div>
<div id="orderbuttons">
<img src="/images/logopakketten/ordernow.png" alt="" />
<img src="/images/logopakketten/ordernow.png" alt="" />
<img src="/images/logopakketten/ordernow.png" alt="" />
<img src="/images/logopakketten/ordernowlastcolumn.png" alt="" />
</div>
Why are you using positioning? That's a rhetorical question, you're not supposed to (use positioning). It's the jQuery of CSS, everyone uses it and it's the worst thing you can use.
If the child elements are floating than the parent needs to have overflow: auto; set. Also do not start relative URLs with a slash. You should get used to using the base element...
http://www.jabcreations.com/blog/streamlining-local-and-live-development-with-the-base-element
The main element with the repeating grey background-image should contain those vertical banners. You want text to the left of those banners? Then put text to the left of those banners.
You did not post enough to warrant a full working demo (reply with more info and I might be able to refine this for you) though this will get you moving and grooving in the right direction. Make sure you adjust the base element accordingly (it will be different for your local/live environments, use a scripting language like PHP to determine your domain (e.g. localhost or example.com) and then serve the correct value for the base element).
<?php
if (isset($_SERVER['HTTP_ACCEPT']))
{
if (stristr($_SERVER['HTTP_ACCEPT'],'application/xhtml+xml'))
{
header('Content-Type: application/xhtml+xml');
}
else {header('Content-Type: text/html');}
}
echo '<?xml version="1.0" encoding="UTF-8"?>'."\n";
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Example</title>
<base href="http://localhost/version-3.0/" />
<style type="text/css">
.overflow {overflow: auto;}
.left {float: left;}
.width_10 {width: 10%;}
.width_20 {width: 20%;}
.width_30 {width: 30%;}
</style>
</head>
<body>
<div class="overflow">
<div class="left">
<p>text here</p>
</div>
<div class="vbanner">
<img src="images/logopakketten/Prijskolom%20S.png" alt="" />
</div>
<div class="vbanner">
<img src="images/logopakketten/Prijskolom%20M.png" alt="" />
</div>
<div class="vbanner">
<img src="images/logopakketten/Prijskolom%20L.png" alt="" />
</div>
<div class="vbanner">
<img src="images/logopakketten/Prijskolom%20XXL.png" alt="" />
</div>
</div>
</body>
</html>
Save this as an .xhtml extension if you're not using scripting (e.g. PHP) (XHTML will not work in IE8 or lower but it's at 5% market share right now, at this stage of your understanding concentrate on competent browsers) and XHTML is great because it's strict the moment you encounter an error you'll know you need to fix it, unless you want to blow three days trying to figure out you're missing a quote on an attribute. Strict code means you'll get in to the groove of doing it right the first time once you're used to it and it'll save you immense amounts of time.
You could also probably stand to learn how to correctly utilize CSS level 1, not a joke, most people don't correctly use the float property and end up spamming tons of position properties all over the place turning a page in to suck.
http://www.jabcreations.com/web/css/nested-divisible-elements
Yeah, you'll eventually utilize position for certain main-level elements for sites with advanced layouts (hint: 99% of sites do NOT have advanced layouts) but without a good foundation everything laying on top of that will be even less sturdy to relay on.
I am doing some final testing of my site before it goes live. I have built it in Chrome and I am finding all the things that done work in IE!
I have a sprite that I built that is not showing in IE...
HTML
<img src="http://127.0.0.1:600/wordpress/wp-content/uploads/2012/06/spacer.gif" class="sprite social plus1" alt="Join our Circles on Google+" />
<img src="http://127.0.0.1:600/wordpress/wp-content/uploads/2012/06/spacer.gif" class="sprite social facebook" alt="Like Primoris Financial on Facebook" />
<img src="http://127.0.0.1:600/wordpress/wp-content/uploads/2012/06/spacer.gif" class="sprite social linkedin" alt="Benjamin Irons on LinkedIn" />
<img src="http://127.0.0.1:600/wordpress/wp-content/uploads/2012/06/spacer.gif" class="sprite social blogger" alt="Primoris Financial on Blogger" />
<img src="http://127.0.0.1:600/wordpress/wp-content/uploads/2012/06/spacer.gif" class="sprite social twitter" alt="Follow Primoris Financial on Twitter" />
<img src="http://127.0.0.1:600/wordpress/wp-content/uploads/2012/06/spacer.gif" class="sprite social youtube" alt="Primoris Financial on YouTube" />
with the following CSS
.sprite {background:url(http://127.0.0.1:600/wordpress/wp-content/uploads/2012/06/Social-CSS-Sprite-Test.png);}
.social {height:32px;}
/* Social Buttons */
.plus1 {width:32px; background-position:0px 0px;}
.facebook {width:32px; background-position:-33px 0px;}
.linkedin {width:32px; background-position:-66px 0px;}
.blogger {width:32px; background-position:-99px 0px;}
.twitter {width:32px; background-position:-132px 0px;}
.youtube {width:32px; background-position:-165px 0px
;}
One of the main problems as far as I can see is that you are linking to the image in your CSS without using quotation/speech marks. And as dystroy said, don't hard link to the image, it's best to do it relatively like this:
{background:url('../wp-content/uploads/2012/06/Social-CSS-Sprite-Test.png');}
This should fix your problem.
Remove the src from your images (better use span than img).
Fix the URL in your css to be relative and not point to 127.0.0.1 (localhost).
Check that you have the correct HTML headers :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
I have a hover solution setup with CSS. However, the hover images don't respect the viewport and therefore end up displaying outside of it. I planned to simply create new classes specifying the offset depending on the location of the image within my design, but since I can't control the resolution the user is using, I was thinking there should be some way to force the hover to display within the viewport. Does anyone have an idea on how I can do this?
I have the following CSS:
.thumbnail:hover {
background-color: transparent;
z-index: 50;
}
.thumbnail span {
position: absolute;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img {
border-width: 0;
padding: 2px;
}
.thumbnail:hover span {
visibility: visible;
top: 0;
left: 70px;
}
To match the following thumbnails with hover:
<li>
<a href="http://www.yahoo.com" class="img thumbnail">
<img src="1_s.jpg" />
<span><img src="1_b.jpg" /></span>
</a>
</li>
<li>
<a href="http://www.google.com" class="img thumbnail">
<img src="2_s.jpg" />
<span><img src="2_b.jpg" /></span>
</a>
</li>
I have a sample page here displaying the behavior:
http://estorkdelivery.com/example/example2.html
Hover over the images at the bottom to see the hover image display outside of the viewport.
Thanks!
Update 2/22/2012 I tested answer #1 below, but it introduced new issues such as the need to change the transparency and the need to have the hover image always display from the top left of the image - both issues I saw no way of modifying with the script options. Anyone have other suggestions or a way to modify the script in answer #1? Also, I should add what I'm looking for as more of the final result is the hover styling of images on istockphoto.com where the images always appear in the same spot to the left or right of the images they are hovering over and not based off the position of the mouse as you hover over the image.
I've created a bespoke plugin for you!
http://jsfiddle.net/adaz/tAECz/
Well, it's pretty basic but I think it meets your criteria. You can activate it in two ways:
1) If you can't be bothered creating thumbnails for every image, you can just simply list your images like this:
<ul id="istockWannabe">
<li>
<img src="imgURL" width="600" height="400" title="Description" />
</li>
<li>
<img src="imgURL" width="600" height="400" title="Description" />
</li>
...
</ul>
2) If you really want to create your own thumbnails, your html should look like this:
<ul id="istockWannabe">
<li>
<span rel="largeImgURL"><img src="thumbURL" /><span class="iStockWannabe_description">Image description</span></span>
</li>
...
</ul>
Either way you choose, you need to include jQuery 1.7+ in your page along with my plugin.
The very last thing you need to do is to activate it, if you're going for the first option, you can just include in your page following code:
<script type="text/javascript">
$(document).ready(function() {
$("#istockWannabe").istockWannabe();
});
</script>
If you're going for the second option, you need to override default settings like this:
<script type="text/javascript">
$(document).ready(function() {
$("#istockWannabe").istockWannabe({ createThumbs: false });
});
</script>
This is more like a prototype so it's quite limited in terms of functionaltiy but you can set some options like:
thumbMaxWidth: 100
thumbMaxHeight: 100
tooltipWidth: 200
tooltipHeight: 150
transitionSpeed: 100
If you like it, I'm happy to spend some time on it and adjust it to suit your needs!
Try the jQuery Tooltip:
Here is an example according to your request:
http://jsfiddle.net/cadence96/3X2eZ/
DOCS
http://docs.jquery.com/Plugins/Tooltip
http://jquery.bassistance.de/tooltip/demo/
Quick instructions:
1) Within the <head> load the css and scripts:
<link href="http://jquery.bassistance.de/tooltip/jquery.tooltip.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://jquery.bassistance.de/tooltip/jquery.tooltip.js" type="text/javascript"></script>
2) Still within the <head> place the execution script:
<script type="text/javascript">
$(document).ready(function() {
$(".your-div").tooltip({
track: true,
delay: 0,
showURL: false,
fade: 250,
bodyHandler: function() {
return $($(this).next().html());
},
showURL: false
});
});
</script>
The class '.my-div' will be used to display the image with the hover event.
The sibling div to '.my-div' must contain the hidden elements to make visible after hovering.
<ul>
<li>
<div class="my-div">
<!-- Here comes the image with the hover event -->
</div>
<div class="active-hover">
<!-- Here comes all the hidden elements I want to display while hovering the PREVIOUS div --><br />
<!-- .active-hover must be set with display:none -->
</div>
</li>
</ul>
That's all!
I've developed a script, in the js you can change the width of the container.
Here is the fiddle:
http://jsfiddle.net/cadence96/GgDqh/
UPDATED, NOW WORKS IN FIDDLE AND IS MORE ADAPTABLE.
UPDATED:
demo : http://so.lucafilosofi.com/make-css-hover-stay-within-viewport
look at the source code
NB: this does not take in consideration cases in which the popup is bigger then the window, in this case you should not only change the offset position but you have to resize the popup to fit the window.
This works. I however solved the problem only for the Y-axis. For the horizontal offset it should be the same. See how it works here.
I set the top to exactly the side of the image * -1, this aligns the image at the bottom if it doesn't fit, change that value to whatever you want. The images are very big and this script is however not gonna be bulletproof. You would have to get the whole visible area to make sure it doesn't cut out on the other side when you re-position it.
The markup hasn't changed, I just added the Jquery:
$(document).ready(function(){
$(".thumbnail > img").mouseenter(function(){
var winSize = $(window).height();
var winScrollTop = $(window).scrollTop();
var linkOffset = $(this).offset().top - winScrollTop + 75;
// 75px is the height of the img. To get the offset().bottom . Get rid of the scroll too.
var imgHover = $(this).next("span");
var imgHoverHeight = parseInt(imgHover.children("img").attr("height"));
var spaceDif = winSize-linkOffset;
if(spaceDif < imgHoverHeight){
imgHover.css("top", -imgHoverHeight+"px");
//it doesn't have to be -imgHoverHeight. Tweak this value to get better results
}
});
$(".thumbnail > img").mouseout(function(){
$("span").css("top", "0");
});
});
Hope it helped!!
Try this one... seems comparatively cool!
<html>
<head>
<title>Hover Test</title>
<style>
li {margin-bottom: 100px;}
.thumbnail{position: relative;z-index: 0;}
.thumbnail:hover{background-color: transparent;z-index: 50;}
.thumbnail div{ /*CSS for enlarged image*/position: absolute;padding: 5px;left: -1000px;border: 1px dashed gray;visibility: hidden;color: black;text-decoration: none;}
.thumbnail div img{ /*CSS for enlarged image*/border-width: 0;padding: 2px;}
.thumbnail:hover div{ /*CSS for enlarged image on hover*/visibility: visible;top: 0;left: 70px; /*position where enlarged image should offset horizontally */}
</style>
</head>
<body>
<li>
<a href="http://www.yahoo.com" class="img thumbnail">
<img src="1_s.jpg">
<div><img src="1_b.jpg"></div>
</a>
</li>
<li>
<a href="http://www.google.com" class="img thumbnail">
<img src="2_s.jpg">
<div><img src="2_b.jpg"></div>
</a>
</li>
<li>
<a href="http://www.apple.com" class="img thumbnail">
<img src="3_s.jpg">
<div><img src="3_b.jpg"></div>
</a>
</li>
<li>
<a href="http://www.babycenter.com" class="img thumbnail">
<img src="4_s.jpg">
<div><img src="4_b.jpg"></div>
</a>
</li>
<li>
<a href="http://www.food.com" class="img thumbnail">
<img src="5_s.jpg">
<div><img src="5_b.jpg"></div>
</a>
</li>
</body>