|
HTML - Ajax Image Reload
Hi guys, I have a problem and I really dont know how to solve it:
my ajax/php/mysql application has to reload a picture every 5 secs. The image gets overwritten every 5 secs too so you can see in the browser how it changes. It works good in Firefox but in IE, the browser saves the image in the cache and doesnt reload it, so I see every time the same pic, even if it was overwritten!!! the main problem is that the image has to keep its name, so renaming the picture isn't a solution :S Reloading the page isn't a solution neither because i use ajax to reload just the container div. I tried with: <META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE"> and <meta http-equiv="expires" content="-1" > but IE doesnt reload the image!!!!! Please help me if you know any solution... Thanks in advance! Sebastian Breit.- Similar TutorialsHi everyone. I'm after an image gallery for my site like the one found here . I have found the Ajax image gallerys quite nice, but don't have the ability to scroll through the thumbnails if there is more than, say, 5 displayed. Does anybody know of any similar scripts or whatever to get a better result to the mentioned website. TIA, n00b Daniel Hello all. I know that to view changes I've made to my website, I need to reload my browser or empty my cache. I'm just wondering if there's any way to have the site reload itself or something so that guests who have seen the old site don't have to hit reload to view changes. Thanks, ~~Idaho Parkour I have a page and need an image to load from the server whenever the page is loaded (even if the user hits the back/forward button). I am aware of doing it with a META tag, but I only want it with one image - not every image on the page. Thanks in advance for the help! Hello, I'm not sure if what I'm asking is possible using html, but I'm going to ask anyway... I'm trying to figure out how to have a sidebar randomly cycle through a series of images each time the page is loaded/refreshed. I'd like the same image displayed at the top and bottom of my sidebar, one image each at the top and bottom of my menu list. But I want to make sure that the image displayed at top and bottom are the same one. Here's my current version of the site: http://home.comcast.net/~blayne81/l5rrpgweb/ You can see the menu on the left side of the page and the two images at the top and bottom of the menu. I have another eight or so images I'd like it to display randomly or cycle through in order (it really doesn't matter which), whenever the page loads/reloads so I don't have to manually pick which image appears every page I write, the code will do that for me. Thanks for your help, Brienprime I've got a page that, on starting, checks its URL for a hash extension and behaves accordingly. So the hash, or lack thereof, is important. I want this page to contain some hyperlinks to itself, with various hash extensions. It doesn't work! If the URL is just to the page (eg. mypage.html) it reloads fine. But if the URL is, for example mypage.html#&e=extrastuff, the page doesn't reload at all. Is there a solution to this? I have need to include a button in a SharePoint page that will refresh that page, but strip out everyting after the .aspx in the URL (meaning "?blablabla"). I know the simple code <a href="#">click me</a> will load the current page. But is there a code that will strip out everything after the "?" portion? Hi-- I was hoping someone could tell me how to edit this contact form so that it does not redirect to another page (the php page)? I'd like it to just simply send the message without leaving the page. The trick here is that I am using a javascript link to submit the form, NOT a button... Any help would be most appreciated! HTML PAGE: <body> <script type="text/javascript"> function submitform() { document.forms["form"].submit(); } </script> <form id= "form" method="POST" name="form" action="mailer.php"> Name: <input type="text" name="name" size="19"><br> <br> E-Mail: <input type="text" name="email" size="19"><br> <br> Message:<br> <textarea rows="9" name="message" cols="30"></textarea><br> <br> <a href="javascript: submitform()" >Searchthis</a> </form> </body> PHP FILE: <?php $to = "info@abcsofufos.com"; $subject = "ABCs of UFOs"; $name_field = $_POST['name']; $email_field = $_POST['email']; $message = $_POST['message']; $body = "From: $name_field\n E-Mail: $email_field\n Message:\n $message"; echo "Data has been submitted to $to!"; mail($to, $subject, $body); ?> Hello I have an issue where I have two web pages generated from Java servlets in NetBeans 5.5. The first of these pages requires some user input and when the page's form is submitted, this input is sent to the server. The server processes the input to generate a text file which is used by a graphing tool to plot a graph as a 'png' file. This text file and graph are then displayed in the HTML generated for the second page using 'href's in a table. This works perfectly well but if the user wants to alter the graph, they have to go back to page one and change the options and resubmit the form. This is where the problem occurs; in Firefox all is well but in Internet Explorer and Opera, when they resubmit the form, page two displays the original graph rather than the changed one. A hard 'refresh' is required via F5 to force the displaying of the new text file and graph. I have tried various of the HTML: meta http-equiv=\"refresh\" content=\"0\"> alternatives and forcinf reload upon loading the second page but the graph and text file still show original data. Is there a way to force the browser to 'pick up' the new text and graph generated so that the page display is correct? I see this more as an HTML issue rather than a servlets one hence its inclusion in this forum. Thanks Martin O'Shea. Hi, I am working on adding non java-script buttons on my website using CSS style sheets. I used a technique given at http://builder.com.com/5100-6371-5323375-2.html. I modified the colors a little but it is basically using technique 2 at this link. Everything works well with the exception of one issue. In Internet Explorer, when I press a link and then use the back button on the browser to return to the previous page, the link for the previous page is still selected and the button appears to still be "pressed". You can see this by going to http://www.apexmoves.com with internet explorer, clicking one of the buttons on the left side of the site, and then using the browser's back button. You will see that the link that was clicked is still selected and this button appears to be stuck in the down position. If you click anywhere else on the screen, the button is released. This is because the link for the pressed button is has the status of active. Does anyone have any ideas on how to solve this. Is that a way to make the status of this link "visited"? Any Ideas would be greatly appreciated. Thanks Brad I have plain HTML on the main page and <iFrame> tag on it, inside tag i have URL to other page that using some script that forces host page to reload and show page from frame instead of it. Can i somehow stop it from messing my entire main page? I'd like to have a newsletter opt-in, but I don't want to move the person to a php page to confirm they're in the system. Is it possible to add them from the same page, and without a page refresh, show them they're added? I really need help on this this is the original code : - Code: <html> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1250"> <meta name="generator" content="Andy Moo http://locationdetection.mobi/"> <title>TEST1</title> </head> <body> <div id="geo" class="geolocation_data"></div> <?php include 'geojavascript.php'; ?> </body> </html> I would like to add ajax auto refresh.. to refresh the div link which is something like this : - Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<script>
var auto_refresh = setInterval(
function()
{
$('#geo').fadeOut('slow').load('geojavascript.php').fadeIn("slow");
}, 20000);
</script>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="Andy Moo http://locationdetection.mobi/">
<title>Locator</title>
</head>
<body>
<div id="geo" class="geolocation_data"></div>
<?php
include 'geojavascript.php';
?>
</body>
</html>
But, there is something wrong here... instead of refreshing the div.. it refresh html page only.. not the div data.. anyone.. please help me on this ? thanks in advance guys... Hi... I am using an application that delivers data in the form of HTML tags (example: ^vst843^). I use these tags in an HTX file which writes to an HTML web page. I'd like to use Ajax to update the tag values without refreshing the page, but from what I understand I must write in Javascript to use Ajax. Am I right about this? If so how can I use the HTML tags coming from my application in this way? Thanks. http://www.walterdecantelupe.co.uk/n...c-content.html I have been working on calling external html files into divs on another page and can't seem to get it right! I can't see what I am doing wring here! Please help. Cheers - Mas The original files are available here http://www.dhtmlgoodies.com/scripts/...ic-content.zip Html HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Ajax dynamic content</title>
<style type="text/css">
/* This css is only needed for the demo */
body{
margin:10px;
font-size:0.9em;
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
text-align:center;
background-color:#E2EBED;
height:100%;
}
a{
color:#F00;
}
#mainContainer{
width:760px;
margin:0 auto;
text-align:left;
background-color:#FFF;
height:100%;
padding-bottom:10px;
}
#mainContainer .news{
margin:5px;
border:1px dotted #555;
background-color:#EEE;
padding:10px;
}
#mainContainer img{
float:left;
margin:2px;
}
div#header{
border:0px;
background-color:#FFF;
padding:0px;
margin:0px;
height:100px;
}
h2{
font-size:1.3em;
margin-bottom:5px;
}
p{
margin-top:0px;
}
.clear{
clear:both;
}
h2{
color:#000;
}
#news2{
height:150px;
}
.header{
padding-left:5px;
font-weight:bold;
}
</style>
<script type="text/javascript" src="http://www.walterdecantelupe.co.uk/new/js/ajax.js"></script>
<script type="text/javascript" src="http://www.walterdecantelupe.co.uk/new/js/ajax-dynamic-content.js"></script>
<script type="text/javascript">
ajax_loadContent('news1','http://www.walterdecantelupe.co.uk/new/external/externalfile1.html');
ajax_loadContent('news2','http://www.walterdecantelupe.co.uk/new/external/externalfile2.html');
ajax_loadContent('news3','http://www.walterdecantelupe.co.uk/new/external/externalfile3.html');
</script>
</head>
<body>
<div id="mainContainer">
<p class="header">The content of the three boxes below are loaded by Ajax(Asyncron Javascript And XML) from external files.</p>
<div class="news" id="news1"></div>
<div class="news" id="news2"></div>
<div class="news" id="news3"></div>
</div>
</body>
</html>
Hi all -- I'm having an interesting problem. I'm designing a web page that has a navigation banner (home - programs - schedule of events - contact us - downloads) that is made up of a .png for each page (i.e. home.png, programs.png, etc). My page is 1000px wide and all of the navigation banner's images add up to 1000px wide. I'm using JavaScript to create an onMouseOver and onMouseOut effect on each of the images. The problem that I'm having occurs when I tried to add a link (either by <A HREF= or using an image map). Whenever I add a link to the image, a small (3px) area of white space shows up to the right of the image. This shifts all of my other images 3px to the right (and 3 more for each link I add to subsequent images) thus making the total width of the navigation banner over 1000px and the last image gets shoved to a new line. I can find no way to get rid of this white space other than to remove the link from the image. There is no property on the page that adds any sort of padding, margins, or borders to images or links, so I can see no property that has to be changed. Help! How do I get rid of this white space but still keep the link on the image?? [I posted this question on the Adobe forum to no avail, below is a screencap I took of the issue I'm having] Thanks in advance! //kl PS - I am using both IE8 and Chrome to view this webpage. I've set all the margins/padding/borders to 0px. Here is my CSS and the part of the code that pertains to the navigation banner. CSS: Code: <style type="text/css">
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
background-image: url(images/blue.bg.png);
background-repeat: repeat;
background-color: #009;
}
.oneColFixCtr #container {
width: 1000px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 0px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
}
.oneColFixCtr #mainContent {
padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
}
body, td, th {
color: #333;
}
#main_banner2 {
margin: 0px;
padding: 0px;
height: auto;
width: 1000px;
}
-->
</style>
</head>
Nav Banner: NOTE:: below HAS to be all one paragraph because if i insert a carriage return in between images, it also adds the white space... Code: <body class="oneColFixCtr"> <!-- MAIN NAVIGATION BANNER --> <!--HOME--><img src="images/nav/home.png" alt="home" name="home" width="82" height="30" border="0" onMouseOver="document.images.home.src='images/nav/home_over.png'" onMouseOut ="document.images.home.src='images/nav/home.png'"/><!--PROGRAMS--><img src="images/nav/programs.png" width="111" height="30" border="0" name="programs" onMouseOver="document.images.programs.src='images/nav/programs_over.png'" onMouseOut ="document.images.programs.src='images/nav/programs.png'"/><!--SCHEDULE OF EVENTS--><img src="images/nav/scheduleofevents.png" width="189" height="30" border="0" name="scheduleofevents" onMouseOver="document.images.scheduleofevents.src='images/nav/scheduleofevents_ over.png'" onMouseOut ="document.images.scheduleofevents.src='images/nav/scheduleofevents.png'"/><!-- CONTACT US--><img src="images/nav/contactus.png" width="119" height="30" border="0" name="contactus" onMouseOver="document.images.contactus.src='images/nav/contactus_over.png'" onMouseOut ="document.images.contactus.src='images/nav/contactus.png'"/><!--DOWNLOADS--><i mg src="images/nav/downloads.png" width="267" height="30" border="0" name="downloads" onMouseOver="document.images.downloads.src='images/nav/downloads_over.png'" onMouseOut ="document.images.downloads.src='images/nav/downloads.png'"/><!--FACEBOOK--><im g src="images/nav/facebook.png" width="90" height="30" border="0" name="facebook" onMouseOver="document.images.facebook.src='images/nav/facebook_over.png'" onMouseOut ="document.images.facebook.src='images/nav/facebook.png'"/><!--TWITTER--><img src="images/nav/twitter.png" width="67" height="30" border="0" name="twitter" onMouseOver="document.images.twitter.src='images/nav/twitter_over.png'" onMouseOut ="document.images.twitter.src='images/nav/twitter.png'"/><!--BLOGGER--><img src="images/nav/blogger.png" width="75" height="30" border="0" name="blogger" onMouseOver="document.images.blogger.src='images/nav/blogger_over.png'" onMouseOut ="document.images.blogger.src='images/nav/blogger.png'"/><img src="images/home_banner.png" alt="home_border" width="1000" height="7" /><br /> Hi, I am designing a small website for a friend and decided to use Ajax on one of the pages: http://122.201.74.87/~natural/treatments.html Problem is in firefox the white background (cell) doesnt extend with the ajax cell so the text just runs down the page over the purple background. But if you look at the page in internet explorer the white background (cell) extends and collapses with the ajax cell like it should. Can someone have a quick look at this and let me know what changes i should make so it works in firefox like it does in IE. PS. Yes the coding is nothing special because it is just a quick site i put together for a friend. Thanks. I have a problem filling select input from javascript/ajax: the important bits of code: function handleFillList() { if (filledList.readyState == 4) window.document.getElementById('listToFill').innerHTML = filledList.responseText; alert(filledList.responseText); alert(window.document.getElementById('listToFill').innerHTML); One would think, that both alerts would show the same result, but it is not so! The first gives me (only the beggining is important) : <option value=CANADA>CANADA</OPTION><option value=CHINA>CHINA</OPTION><option ...... The second gives me: CANADA</OPTION><OPTION value="CHINA">CHINA</OPTION><OPTION..... why did the begging got lost! And then I don't get the select filled as it should be! Thank you for your help, ales So in January 2006 I posted a question about "making two buttons in one" 3 years and 5 months later i am happy to announce that I have found a solution. Ok, so no I have not spent the last three years looking, but the need for one came around again yesterday so I revisited the project. All I needed was "simple" image toggle. Image 'A' click it once it changes to image 'B' click it again it changes back to image 'A' All the "image toggle" codes I could find were extremely complex. I thought I had finally found one, it wasn't perfect, but it was the smallest and most basic thing I could find. HTML Code: <html>
<head>
<style type="text/css">
.on {background-image:url(playlist_btn.png); background-repeat:no-repeat;}
.off {background-image:url(playlist_btn_x.png); background-repeat:no-repeat;}
</style>
<script language="javascript">
function togglestyle(el){if(el.className == "on") {el.className="off";} else {el.className="on";}}
</script>
</head>
<body>
<div id="onoff" class="playlist_btn"><img src="blank.gif" width="50 height="50" onclick="togglestyle(onoff)"></div>
</body>
</html>
I tested it, it worked, so I considered problem solved. I placed it in my page and nothing. Turns out it wont work with a doc type - so it's useless. Other problems, I'm not big on using "blank gif's" unless I have to, if you want multiple image toggles you need a new JS function for each one, and two lines of css as well. And, though I rarely use image rollovers anymore, it would certainly not be possible in this method. So it was back to the drawing board. Well, I had actually already found the solution a few minuets prior to finding out that the above code is so good. I had coded a button that on rollover shows a tooltip, when you click the button, the text in the tool tip, changes, chick again and it reverts. All done with a simple showHide javascript function, that i am finfing out has many uses. here is the awesome code: Code:
function showHide(elementid){
if (document.getElementById(elementid).style.display == 'none'){
document.getElementById(elementid).style.display = '';
} else {
document.getElementById(elementid).style.display = 'none';
}
}
function hideShow(elementid){
if (document.getElementById(elementid).style.display == ''){
document.getElementById(elementid).style.display = 'none';
} else {
document.getElementById(elementid).style.display = '';
}
}
I wont take credit for the showHide code, but I will take credit for the hideShow portion, obviously a monkey could have coded the revers, but iot does make it that much more universal. As the original code was designed to show something that was hidden, add the revers to hide something that is showing and it's perfect. Now I will take a moment to say, though I have yet to find a problem with the code, it seems to work in most browsers, firefox, ie, safari, and validates for WC3 - In sure it has it's flaws. Until now, to show and hide divs I had used the MM_showHideLayers JavaScript function, which by default used the visibility style. It is of course a good script, and has many uses, it's not very big, but it is somewhat complex. The other thing to think about is that invisible objects still take up space. That's what is cool about the display:none: style, is that is not only invisible but it doesn't take up space. So here is how I used the above to JavaScript to make a simple onclick image toggle: HTML Code: <img id="on" src="on.png" width="50" height="50" onClick="javascript:hideShow('on'); javascript:showHide('off')" alt="on">
<img id="off" src="off.png" width="50" height="50" onClick="javascript:hideShow('off'); javascript:showHide('plus')" style="display:none;" alt="off">
Cool huh? Now this example does not have a rollover either, but since it uses to individual images and is not replacing one image wioth another you could easily apply a rollover to both images. But, hold on, look at the above code, isn't that essentially a rollover? Change the first onClick to onMouseOver and the second to onMouseOut and look at that a 'brand new' method for mouseovers. So lets take a look at this for a second, and compare MM_swapImage to this new hideShow method. As far as CSS rollovers I definitely prefer them to the MM_swapImage method, as they use a minimal amount of code. However they actually take a lot of math, construction the buttons is somewhat tedious, because css buttons use 1 image and change it's position, to work well you have to use a "blank.gif" and the the css can really add up if you have a lot of buttons: Also, you can't go directly to a button in the document, you have to fish through the css to make any adjustments. But they are fast, they don't need to be preloaded and... they are pretty cool. But anyway, swapImage and hideShow... The left is the MM_swapImage method. Now when you use the swapImage js you also have to use MM_swapImgRestore, MM_findObj, MM_preloadImages. You don't have to use the preload script but it does make thing work faster... supposedly, but that requires a onload script in the body tag, and if you have a lot of rollovers your body tag can get really long really quick. So what are the advantages, well we know for sure it works, and you only need on image in the document, however actualy having the image you are "swapping" too actually in the document can add functionality. So as you can see, on the right, the showHide method is, in total code, much smaller. True you do need to use two images, so the total code in the body is longer but, it's more than evened out bu the minimal JavaScript, and I think it's worth it. You don't need to use a preloader, you have full control over both images, the up and over state, and unlike the swapImage method, though it's rare you would need to, your up and over images can actually be different sizes, which is kind of cool. So here's the basic code for a rollover: HTML Code: <img id="up" src="up.png" width="50" height="50" onMouseOver="javascript:hideShow('up'); javascript:showHide('over')" alt="up">
<a href="http://google.com"><img id="over" src="over.png" width="50" height="50" onMouseOut="javascript:hideShow('over'); javascript:showHide('up')" style="display:none;" alt="over" border="0"></a>
To add a link the button you just apply it to the "over state" image. And unlike swapImage, though it is overkill, you can also add a "downstate" image quite easily. So, back to the on/off button here is how you would code it using showHide with rollovers. HTML Code: <img id="on" src="on.png" width="50" height="50" onMouseOver="javascript:hideShow('on'); javascript:showHide('onover')" alt="on">
<img id="onover" src="on_over.png" width="50" height="50" onMouseOut="javascript:hideShow('onover'); javascript:showHide('on')" onClick="javascript:hideShow('onover'); javascript:showHide('offover')" style="display:none;" alt="onover">
<img id="off" src="off.png" width="50" height="50" onMouseOver="javascript:hideShow('off'); javascript:showHide('offover')" style="display:none;" alt="off">
<img id="offover" src="off_over.png" width="50" height="50" style="display:none;" onMouseout="javascript:hideShow('offover'); javascript:showHide('off')" onClick="javascript:hideShow('onover'); javascript:showHide('off')"alt="offover">
So here is what is going on: you have the upstate on.png image, when you mouse over it on.png is hidden and on_over.png is displayed. When you click on_over.png it is hidden and off_over.png is display, mouse off it and off.png is displayed. Make scene? Now be aware, when you click, you are also in a scene "mousing off" so some flickering can occur. Firefox handles everything pretty well, IE and Safari not so much. When you click the on_over.png the click tells it to hide on_over.png and show the off_over.png, at the same time the mouseoff tells it to hide on_over.png and show the on.png. So fortunately the toggle with rollovers isn't perfect, but perhaps some more tweaking of the code or maybe, in this case swapImage would work better to do the rollovers... But all in all I'd say its a solid concept. If you feel compiled to do so, reply with any comments, concerns or flaws you see. Hey guys. I need a little help with my HTML image rotator. Everything works fine, except the images don't show up on the right slide. All 4 images show up on the first slide. I can't figure out what's wrong. Any help will be greatly appreciated. Code: <!DOCTYPE html>
<html>
<head>
<title>...</title>
<style>
#sliderwrap {
height: 403px;
}
#sliderleft {
width: 10px;
height: 100%;
float: left;
background: #efefef;
border: 1px solid #ccc;
}
#sliderleft div {
height: 100px;
border-bottom: 1px solid black;
}
#slidercontent {
position: relative;
width: 650px;
height: 100%;
float: left;
border: 1px solid black;
overflow: hidden;
}
#sliderimages {
position: absolute;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
#sliderimages img {
display: block;
}
.s0 #slide0,
.s1 #slide1,
.s2 #slide2,
.s3 #slide3 {
background: #ccc;
}
.s0 #sliderimages {top: 0 }
.s1 #sliderimages {top: -500px}
.s2 #sliderimages {top: -1000px}
.s3 #sliderimages {top: -1500px}
</style>
<script>
var slide = 0;
var interval_id = 0;
function stop_timer() {
clearInterval(interval_id);
if (this.getAttribute("data-slide")) {
slide = parseInt(this.getAttribute("data-slide"));
document.getElementById("sliderwrap").className = "s" + slide;
}
}
function start_timer() {
clearInterval(interval_id);
interval_id = setInterval(
function() {
slide = (slide + 1) % 4;
document.getElementById("sliderwrap").className = "s" + slide;
},
3000
);
}
window.onload = function() {
start_timer();
var el = document.getElementById("slidercontent");
var divs = document.getElementById("sliderleft").getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
divs[i].onmouseover = stop_timer;
divs[i].onmouseout = start_timer;
}
el.onmouseover = stop_timer;
el.onmouseout = start_timer;
}
</script>
</head>
<body>
<div id="sliderwrap" class="s0">
<div id="sliderleft">
<div id="slide0" data-slide="0"></div>
<div id="slide1" data-slide="1"></div>
<div id="slide2" data-slide="2"></div>
<div id="slide3" data-slide="3"></div>
</div>
<div id="slidercontent">
<div id="sliderimages">
<img src="http://i.imgur.com/8iWz6.jpg">
<img src="http://i.imgur.com/1d2U6.jpg">
<img src="http://i.imgur.com/8iWz6.jpg">
<img src="http://i.imgur.com/1d2U6.jpg">
</div>
</div>
<div style="clear: both;"></div>
</div>
</body>
</html>
|
|||||||