|
HTML - Pictures On A Page
Relating to: http://www.envirotechuk.org/show.php?page=2
I'm trying to get the news section of this page up and running properly, and this is a "template" I have come up with so far, but as you can see it is a very ugly look, very simple, and does not align properly. The code I am using for this page so far is: <br><blockquote><h1><font face="century gothic,comic sans ms,dotum">News from 26-30th April, 2010</font></h1></blockquote> <p><br> [image-left:parliamentfinal.jpg] <B>Parties Clash Over Climate Change Credentials </B><br><br> For more information, visit <A HREF="http://www.independent.co.uk/environment/climate-change/parties-clash-over-climate-credentials-1954632.html">http://www.independent.co.uk/environment/climate-change/parties-clash-over-climate-credentials-1954632.html</A> <br><p><hr><p> [image-left:renewablefinal.jpg] <b>Britain reaches milestone for renewable energy </B><br><br> For more information, visit <A HREF="http://www.independent.co.uk/environment/climate-change/britain-reaches-milestone-for-renewable-energy1952990.html">http://www.independent.co.uk/environment/climate-change/britain-reaches-milestone-for-renewable-energy-1952990.html</A> <br><br><br><p><hr><p> [image-left:airportfinal.jpg] <b>Empty skies proved that airports cause pollution </b><br><br> For more information, visit <A HREF="http://www.independent.co.uk/environment/climate-change/parties-clash-over-climate-credentials-1954632.html">http://www.independent.co.uk/environment/climate-change/parties-clash-over-climate-credentials-1954632.html</A> <br><P><hr><p> [image-left:earthquakefinal.jpg] <b>Tiny climate changes may trigger quakes</b><br><br> For more information, visit <A HREF="http://www.independent.co.uk/environment/climate-change/tiny-climate-changes-may-trigger-quakes-1948432.html">http://www.independent.co.uk/environment/climate-change/tiny-climate-changes-may-trigger-quakes-1948432.html</A> <br><br><p><hr><p> [image-left:batteryfinal.jpg] <b>Giant batteries could make renewable energy more reliable</b><br><br> For more information, visit <A HREF="http://www.guardian.co.uk/environment/2010/apr/26/gravel-batteries-renewable-energy-storage">http://www.guardian.co.uk/environment/2010/apr/26/gravel-batteries-renewable-energy-storage</A> <br><br><p><hr><p> Does anyone know of anything I can do to make the page look a bit better, and to line up better. All the pictures are 100x(52-100) pixels, but I can only find ways to set the maximum width, nowhere can I seem to resize it to 100x100, or something along those lines. Maybe a good website that resizes pictures to exact sizes? Or is there a template I can use to separate the articles a bit more and give it a uniform look, that will allow for the different heights of the pictures? Any help would be appreciated. Similar TutorialsI have 40 .jpg picures/photos that I want to display on a web page. They have all been through the thumbnail process, and none is larger than 25k. However, when trying to open the page on a dial up connection, the process stops (times out) before all the pictures can be completely displayed. Is there some remedy for this? Is there a way to download them in groups of, say, 10, so the browser can catch up and complete the displays? I don't really have a clue... Thanks... hello, how can i place pictures i wrote a poem left side and need place a pic right side of the poem but it goes right side of where the poem end any help appreciated I created this website, http://solarroadways.com/news.html and everything I created worked. Then my client added new content and pictures by themself and apparently the images load but then disappear in IE. Debugging didn't help, go figure. Anyone encounter this problem? can a border be made around a picture without making a table? TIA Im hoping to put a animated picture on top of a header, but not sure how... All help appreciated Heres some of my code: <html> <body background="black.jpeg"> <head> <div id="header"><h1>Faed's Money Making Guide 2009</h1></div> <div id="links"><ul> <li><a href="links 1.htm"></li> Main</a> <li><a href="mainpage.html"></li> Introduction</a> <li><a href="page1.html"></li> Agility</a> <li><a href="page2.html"></li> Construction</a> <li><a href="page3.htm"></li> Cooking</a> <li><a href="page4.htm"></li> Crafting</a> <li><a href="page5.htm"></li> Farming</a> <li><a href="page6.htm"></li> Fletching</a> <li><a href="mainpage.htm"></li> Fishing</a> <li><a href="mainpage.htm"></li> Firemaking</a> <li><a href="mainpage.htm"></li> Herblore</a> <li><a href="mainpage.htm"></li> Hunter</a> <li><a href="mainpage.htm"></li> Magic</a> <li><a href="mainpage.htm"></li> Mining</a> <li><a href="mainpage.htm"></li> Prayer</a> <li><a href="mainpage.htm"></li> Ranging</a> <li><a href="mainpage.htm"></li> RuneCrafting</a> <li><a href="mainpage.htm"></li> Slayer</a> <li><a href="mainpage.htm"></li> Smithing</a> <li><a href="mainpage.htm"></li> Summoning</a> <li><a href="mainpage.htm"></li> Theiving</a> <li><a href="mainpage.htm"></li> Woodcutting</a> </ul> </div> I'm green at html. I designed a webpage 10years ago using html for dummies, but I have not touched it since. Things have changed and I have forgotten, but google has helped me. What I do struggle with is having pictures side by side and text under them. using: <a href="6922_13_x.jpg"><img src="6922_13_x_thumbnail.jpeg" width="335" height="282" /></a> <a href="6969_01_x.jpg"><img src="6969_01_x_thumbnail.jpeg" width="125" height="280" /></a> gets the thumbnails side by side, but once adding <p>text</p> they change position. Help would be appreciated deply. when I preview my website a active x bar shows up and another thing is that my pictures are not showing. What can I do? Hi, guys. Both new to forums and HTML, but learning fast! I'm currently working on a project, got design and everything ready, and I have created all <div-tags> that I need. I now have a problem with pictures now showing up as I want them. I have created a graphic element for example, with squares on the bottom of the page, and the file is saved as .png, with an opacity. When I specify which file it is in the CSS file, pictures won't show up. Might it be cause the file has an opacity on the direct graphic, and if so; is it possible to set opacity in the HTML.code, or do I need to start with PHP too? Cheers, http://www.reliablegaming.com/test/games2.html I cant seem to get text under each picture, only on the sides....could someone do 1 and resend code so i can see how you did it? Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Welcome to Reliablegaming</title>
<link href="style/style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.style1 {
font-size: 14px;
font-weight: bold;
}
-->
</style>
</head>
<body>
<table width="969" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="15" class="l-bg"><img src="images/bg-left.gif" alt="Reliablegaming" width="15" height="19" /></td>
<td align="center" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="940" height="208">
<param name="movie" value="images/top01.swf" />
<param name="quality" value="high" />
<embed src="images/top01.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="940" height="208"></embed>
</object></td>
</tr>
<tr>
<td><img src="images/barbg.gif" alt="Reliablegaming" width="940" height="58" border="0" usemap="#Map" href="#" /></td>
</tr>
<tr>
<td align="center" valign="top" class="bg1"><blockquote><span class="style1"><u>ReliableGaming - Game Packages</u></span><br>
<p align="center"><a href="Drag to a file to make a link."><img src="images/bf2.jpg" width="100" height="100" /></a> <img src="images/bf2142.jpg" alt="" width="100" height="100" /> <img src="images/css.jpg" alt="" width="100" height="100" /> <img src="images/cs1.6.jpg" alt="" width="100" height="100" /> <img src="images/cscz.jpg" alt="" width="100" height="100" /></p>
<p align="center"><img src="images/dod.jpg" alt="f" width="100" height="100" /> <img src="images/dods.jpg" alt="f" width="100" height="100" /> <img src="images/tf2.jpg" alt="f" width="100" height="100" /> <img src="images/css.jpg" alt="f" width="100" height="100" /> <img src="images/css.jpg" alt="f" width="100" height="100" /></p>
<p align="center"><img src="images/css.jpg" alt="f" width="100" height="100" /> <img src="images/css.jpg" alt="f" width="100" height="100" /> <img src="images/css.jpg" alt="f" width="100" height="100" /> <img src="images/css.jpg" alt="f" width="100" height="100" /> <img src="images/css.jpg" alt="f" width="100" height="100" /></p>
<p align="center"><img src="images/css.jpg" alt="rwer" width="100" height="100" /> <img src="images/css.jpg" alt="werwer" width="100" height="100" /> <img src="images/css.jpg" alt="werwe" width="100" height="100" /> <img src="images/css.jpg" alt="ewrwe" width="100" height="100" /> <img src="images/css.jpg" alt="rwer" width="100" height="100" /></p>
<p align="center"> </p>
<p align="center"> </p>
</blockquote>
</td>
</tr>
<td height="30" align="center" valign="middle" class="bg1"><a href="#" class="footerlink">Home</a> | <a href="terms.html" class="footerlink">Terms of Service</a> | <a href="http://www.reliablegaming.com/modernbill/order/?v=1" class="footerlink">Packages</a> | <a href="forums/" class="footerlink">Forums</a> | <a href="mailto:admin@reliablegaming.com" class="footerlink">Contact Us</a> | <a href="index.html" class="footerlink">ReliableGaming</a></td>
<tr>
<td><img src="images/footer.gif" width="939" height="74" border="0" /></td>
</tr>
</table></td>
<td width="15" class="r-bg"><img src="images/bg-right.gif" alt="Reliablegaming" width="15" height="19" /></td>
</tr>
</table>
<map name="Map" id="Map"><area shape="rect" coords="152,4,263,26" href="mailto:admin@reliablegaming.com" />
<area shape="rect" coords="34,7,113,25" href="forums/" />
<area shape="rect" coords="734,6,855,25" href="/support.html" />
</map>
</body>
</html>
There are about 200 photos in a folder d:\photos\. How to make a script to display slideshow of all photos one by one without entering each photo's name? I found a script which displays all photos but need to input all photos' name. when working locally in the latest Version of IE. They show up fine in FireFox. I searched the forum but it didn't turn any thing up. I tried my setting in IE but can't figure this out. Does anyone have a simple fix for this? Thanks....tg Hello, im just wondering if someone can help me with a little problem i have, im currently building a website using dreamweaver 8, and i have got a gallery page that when i load the page using the f12 (browse file localy) it shows the page fine with all the pictures, yet when i load the page onto the host and then view the page live it will not show any of the pictures, it does not even mention it cannot pic them up. I have tried both ftp the page to the host and also copied the code from dreamweaver into the hosts site creation tool. The page is not exceeding the hosts limit and i have barely used the memory i am currently paying for. The page is www.grangefarmairsoft.co.uk/031206.html, or the code is: <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Grange Farm Airsoft</title> <style type="text/css"> <!-- body { background-color: #A9AE5C; .style5 {font-size: xx-large} --> </style> <script type="text/JavaScript"> <!-- function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } //--> </script> </head> <body onLoad="MM_preloadImages('http://grangefarmairsoft.co.uk/More_hover.gif','http://grangefarmairsoft.co.uk/booking_hover.gif')"> <p align="center"><font color="#2A1F00" face="Arial, Helvetica, sans-serif"></font><a href="http://grangefarmairsoft.co.uk/Book.html " onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Booking','','http://grangefarmairsoft.co.uk/booking_hover.gif',1)"></a><font color="#2A1F00" face="Arial, Helvetica, sans-serif"></font><a href="http://grangefarmairsoft.co.uk/Book.html " onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Booking','','http://grangefarmairsoft.co.uk/booking_hover.gif',1)"></a><img src="http://grangefarmairsoft.co.uk/gfalogo.jpg" alt="title" width="924" height="148" border="0" usemap="#Map" longdesc="http://grangefarmairsoft.co.uk/gfalogo.jpg"> <map name="Map"> <area shape="rect" coords="39,84,272,133" href="http://grangefarmairsoft.co.uk/Book.html"> <area shape="rect" coords="311,85,424,131" href="http://grangefarmairsoft.co.uk/more.html"> <area shape="rect" coords="460,84,640,132" href="http://grangefarmairsoft.co.uk/forum.html"> <area shape="rect" coords="678,86,884,132" href="http://grangefarmairsoft.co.uk/Gallery.html"> <area shape="rect" coords="58,7,881,71" href="http://grangefarmairsoft.co.uk/index.html"> </map> </p> <p align="center"><a href="http://grangefarmairsoft.co.uk/pic031206.html"></a><a href="http://grangefarmairsoft.co.uk/pic031206/100_2404.JPG"><img src="http://grangefarmairsoft.co.uk/pic031206/100_2404.JPG" alt="" width="300" height="250" border="0"> </a><a href="http://grangefarmairsoft.co.uk/pic031206/100_2405.JPG"><img src="http://grangefarmairsoft.co.uk/pic031206/100_2405.JPG" alt="" width="300" height="250" border="0"></a><a href="http://grangefarmairsoft.co.uk/pic031206/100_2406.JPG"><img src="http://grangefarmairsoft.co.uk/pic031206/100_2406.JPG" alt="" width="300" height="250" border="0"></a><a href="http://grangefarmairsoft.co.uk/pic031206/100_2407.JPG"><img src="http://grangefarmairsoft.co.uk/pic031206/100_2407.JPG" alt="" width="300" height="250" border="0"> </a><a href="http://grangefarmairsoft.co.uk/pic031206/100_2408.JPG"><img src="http://grangefarmairsoft.co.uk/pic031206/100_2408.JPG" alt="" width="300" height="250" border="0"> </a><a href="http://grangefarmairsoft.co.uk/pic031206/100_2409.JPG"><img src="http://grangefarmairsoft.co.uk/pic031206/100_2409.JPG" alt="" width="300" height="250" border="0"></a><a href="http://grangefarmairsoft.co.uk/pic031206/100_2410.JPG"><img src="http://grangefarmairsoft.co.uk/pic031206/100_2410.JPG" width="300" height="250" border="0"> </a><a href="http://grangefarmairsoft.co.uk/pic031206/100_2414.JPG"> <img src="http://grangefarmairsoft.co.uk/pic031206/100_2414.JPG" alt="" width="300" height="250" border="0"> </a><a href="http://grangefarmairsoft.co.uk/pic031206/100_2415.JPG"><img src="http://grangefarmairsoft.co.uk/pic031206/100_2415.JPG" alt="" width="300" height="250" border="0"></a><a href="http://grangefarmairsoft.co.uk/pic031206/100_2416.JPG"><img src="http://grangefarmairsoft.co.uk/pic031206/100_2416.JPG" alt="" width="300" height="250" border="0"></a><a href="http://grangefarmairsoft.co.uk/pic031206/100_2417.JPG"> <img src="http://grangefarmairsoft.co.uk/pic031206/100_2417.JPG" alt="" width="300" height="250" border="0"> </a><a href="http://grangefarmairsoft.co.uk/pic031206/100_2418.JPG"><img src="http://grangefarmairsoft.co.uk/pic031206/100_2418.JPG" alt="" width="300" height="250" border="0"></a><a href="http://grangefarmairsoft.co.uk/pic031206/100_2419.JPG"><img src="http://grangefarmairsoft.co.uk/pic031206/100_2419.JPG" alt="" width="300" height="250" border="0"></a><a href="http://grangefarmairsoft.co.uk/pic031206/100_2420.JPG"> <img src="http://grangefarmairsoft.co.uk/pic031206/100_2420.JPG" alt="" width="300" height="250" border="0"> </a><a href="http://grangefarmairsoft.co.uk/pic031206/100_2421.JPG"><img src="http://grangefarmairsoft.co.uk/pic031206/100_2421.JPG" alt="" width="300" height="250" border="0"></a><a href="http://grangefarmairsoft.co.uk/pic031206/100_2422.JPG"><img src="http://grangefarmairsoft.co.uk/pic031206/100_2422.JPG" alt="<empty>" width="300" height="250" border="0"> </a><a href="http://grangefarmairsoft.co.uk/pic031206/100_2422.JPG"><img src="http://grangefarmairsoft.co.uk/pic031206/100_2423.JPG" alt="<empty>" width="300" height="250" border="0"> </a><a href="http://grangefarmairsoft.co.uk/pic031206/100_2424.JPG"><img src="http://grangefarmairsoft.co.uk/pic031206/100_2424.JPG" alt="<empty>" width="300" height="250" border="0"></a><a href="http://grangefarmairsoft.co.uk/pic031206/100_2425.JPG"><img src="http://grangefarmairsoft.co.uk/pic031206/100_2425.JPG" alt="<empty>" width="300" height="250" border="0"> </a><a href="http://grangefarmairsoft.co.uk/pic031206/100_2426.JPG"> <img src="http://grangefarmairsoft.co.uk/pic031206/100_2426.JPG" alt="<empty>" width="300" height="250" border="0"> </a><a href="http://grangefarmairsoft.co.uk/pic031206/100_2427.JPG"> <img src="http://grangefarmairsoft.co.uk/pic031206/100_2427.JPG" alt="<empty>" width="300" height="250" border="0"></a><a href="http://grangefarmairsoft.co.uk/pic031206/100_2428.JPG"> <img src="http://grangefarmairsoft.co.uk/pic031206/100_2428.JPG" alt="<empty>" width="300" height="250" border="0"> </a><a href="http://grangefarmairsoft.co.uk/pic031206/100_2429.JPG"> <img src="http://grangefarmairsoft.co.uk/pic031206/100_2429.JPG" alt="<empty>" width="300" height="250" border="0"> </a><a href="http://grangefarmairsoft.co.uk/pic031206/100_2430.JPG"> <img src="http://grangefarmairsoft.co.uk/pic031206/100_2430.JPG" alt="<empty>" width="300" height="250" border="0"></a><a href="http://grangefarmairsoft.co.uk/pic031206/100_2431.JPG"> <img src="http://grangefarmairsoft.co.uk/pic031206/100_2431.JPG" alt="<empty>" width="300" height="250" border="0"> </a></p> </body> </html> Please can someone help me, i presume it is just a scripting error on my side as im not a verry good at html. Although i have done both the script and used the user front end to try and make this page, the problem is still there. Final note, the web site is for a combat simulation sport called airsoft, it is a lot like paintballing but uses replica guns that fire rubber pellets at a low velocity which is totaly leagal in the uk (well at the moment), just incase anyone wonders why the pictures are of people with guns. Thanks for any help possible Hi! I have put a hyperlink for each picture in my web (http://apeslab.netfirms.com/cgi-bin/randexample.pl ). I now randomize the order of the pix. It means that every time you reload the website, the order of the pix is different. Yet, I cannot figure out how I can put the hyperlink for each pic. So, for instance, I want the cibershot (digi_came3.jpg) to have a hyperlink to yahoo.com. What I wrote for this website is: #!/usr/bin/perl use CGI; $query = new CGI; $v01= "/images/degi_came1.jpg"; $v02= "/images/degi_came2.jpg"; $v03= "/images/degi_came3.jpg"; $l01= "http://www.yahoo.com"; $l02= "http://www.google.com"; $l03= " http://www.asahi.com"; print $query->header; print $query->start_html(-title=>'Mental Rotation'); print "<FONT FACE = 'arial' SIZE = '2'>"; print "<B>Image Rating Example.</B><BR> <BR> Each image depicts two objects. In some cases, one object is a simple rotation of the other. In other cases, the two objects are not the same. For each image, decide whether the objects are the <I>same</I> ( i.e., one is a simple rotation of the other) or whether they are <I>different</I>. <BR><BR>"; print "<FORM ACTION = 'mailto:takao\@asu.edu ' METHOD = 'post' ENCTYPE = 'text/plain'> "; @varlist= ("v01", "v02", "v03"); @linklist= ("l01", "l02", "l03"); srand; @new = (); while (@varlist){ push(@new, splice(@varlist, rand @varlist,1)); } @varlist= @new; print "<CENTER>"; for($i = 0; $i <= 2; ++$i){ $image= $varlist[$i]; $link= $linklist[$i]; print "<a href =$$link> <IMG SRC=$$image width = '180' height = '180'><a><BR>"; print "<TABLE> <TR> <TD ALIGN='center'><I>Same</I><BR> <INPUT TYPE = 'radio' NAME = $varlist[$i] value = '1' > </TD>"; print "<TD ALIGN='center'><I> Different</I><BR> <INPUT TYPE = 'radio' NAME = $varlist[$i] value = '2' > </TD></TR></TABLE><BR>"; } print "<INPUT TYPE = 'submit' VALUE = 'Submit my responses'>"; print "</FORM></FONT></CENTER>"; print $query->end_html; ----------------------------------------------------------------------- As you see, whatever the picture on the top has a link to "yahoo.com" in this program (and I know why, but I cannot figure out how I can make the pictures have right hyperlinks). I also cannot figure out how I can put a sentence next to each pic ("cibershot", for example) and this sentence moves with the pic. Any suggestions/comments would be appreciated. Thanks, --Taka After some tricking and trying ive managed to integrate this "current_page" technique ive learned here from some very talented users. I think ive misplaced maybe one or two symbols.. because in the code everything SEEMs to look ok, but still the images fail to show up. If you care to relieve me from this frustration: have a look here, thanks a bunch the PINK squares are where the images are supposed to be! Is there a code that randomly shows one of e.g. three pictures that changes everytime you refresh the page? And/Or, something that changes the image fading from one into the other on a continuous loop. Thanks. Hey, did a quick search and didn't find anything, I want to have a column of thumbnails on the left side of my page, and I'd like to have it so when a thumbnail is clicked, it loads the fullsize image into a spot to the right without having to create a new page for each image. I don't want to use frames/flash/popups.. this is possible, right? I'm working with Dreamweaver currently and know some html, but that's about the extent of my scripting knowledge. How would I do this? Also, if I could load dynamic text below the image, that would be even better; I want to have captions to go along with each picture. Thanks much guys- hi all can anyone tell me how to add changing pictures in webpage. thanks in advance.............. I was able to get this page to display fine in IE 7 but not in IE8 or firefox. The pictures move a little bit but does not move all the way to the end. Please help http://www.cantonwong1.com/dish.html how can i place text and pictures where i want i would be nice by using cordinates but i don't know how... |
|||||||