|
HTML - One Big Map Vs Many Smaller Images
Here's my hypothetical scenario...
I have an image map (1000px by 1000px) divided into smaller squares (lets say ten images horizontally by ten images vertically, adding up to one hundred images all together), each linked to a corresponding HTML information file. Now, when talking about download speeds, would it be more efficient for me to use one big image as a map, or should I use one hundred smaller, individual images, each as a link? I don't have anything that would allow me to reliably test the download speeds of both variations, and my site won't be up on the Internet until it is finished (or somewhere close to it). Similar TutorialsHi, My website, when viewed on my blackberry, is coming out all wrong - assume it is because of the smaller screen size on a phone. However, when I downloaded the initial template (which I have made a lot of html and css changes to), the mod-slide didn't flow down the page as it does now. Please could anyone help. The website is www.auxus.co.uk Thanks, Ishveen so i'm working on my new site and everything seemed to be working find until i got to the 8th image since the image is wide instead of a scroll arrow appearing to scroll the page over, the image just collapses below my other divs to fit. can anyone help me fix this? thanks in advance guys this is the website http://www.paulodourado.com/x_milk.html and this is the page where I encounter problems http://www.paulodourado.com/thrice.html Hello, I've got a pesky bug that I can't figure out... I'm designing a website for a record store and the width is a little larger than 800px.. on larger screens, it loads just fine.. however when I try to load it on a smaller screen and scroll to the right (to see the info that is cut off) all of the background colors of my elements continue to be cut off. This does not occur when I start with a small window on a big screen and resize... hope that makes some sort of sense here's the site I am trying to move my title text further to the right. However, when I do (by adding more  , the title breaks into another line instead of moving further to the right. I have tried manipulating the margin px, but it isnt changing. I am not familiar with manipulating floating text. How do I accomplish this? Here is my current code: <td align="center" valign="top"><table width="655" border="0" cellspacing="0" cellpadding="0"> <div style="background:url(/offices.jpg);margin:0;"><br/><br/><span style="float:right;margin:0px 150px 198px 0px;"><font type="Arial Narrow" size="5"><b> &nbs p; &n bsp; <font color="#4E4848">My title</font></b></font> </span> Hi all, I was wondering if someone could help me. I want a border around the entire page. It works fine in IE at all resolutions, but breaks in FF. I explicitly stated html and body heights to be 100% but that doesn't help. I should be able to spot the error, but its escaping me. Can someone please look at my code and tell me if you see anything? Thanks Rick --- The HTML: HTML 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>
<title>San Jose Cell Phones</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body style="font-family:verdana,tahoma, sans-serif;">
<div style="margin-left:3%;">
<h1 style="font-size:4pt;color:#ffffff;">San Jose Cell Phones ringtones AT&T Yahoo dsl satellite 408 calling dish network</h1>
<div align ="center">
<img src="images/sanjose.png" alt="san jose" style="width:195px;height:39px; vertical-align:middle;" />
<img src="images/smallcellphone.jpg" alt="san jose cell phones logo" style="width:72px; height:204px; padding:20px; vertical-align:middle;" />
<img src="images/cellphones.png" alt="cell phones" style="width:246px;height:39px; vertical-align:middle;" />
</div>
<h4>Choose Service</h4>
<div class="container">
<ul id="navSquare">
<!-- CSS Tabs -->
<li><a class="active" href="index.html">Cellular</a></li>
<li><a href="ringtones.html">Ringtones</a></li>
<li><a href="phonecards.html">Phonecards</a></li>
<li><a href="dishnetwork.html">Dish Network</a></li>
<li><a href="dsl.html">DSL Service</a></li>
</ul>
</div>
<hr align="center" width="33%" />
<br clear ="all" />
<div style="float:left;color:#006699;width:250px;">
<div style="background-color:#006699;color:#ffffcc;margin-top:30px;height:10px;padding:3px 10px 3px 10px;border:1px solid black;border-bottom:0px;">Hi</div>
<div style="line-height:1.3em;padding:10px;text-align:justify;background-color:#FFFFCC;border:1px solid black;">
<p style="font-size:11pt;font-weight:600;padding-top:10px;">The Original Online Prepaid<br />
Domestic and International<br />
Calling Cards Superstore</p>
<p><strong>Save up to 80% on long distance calls</strong>
<br />
We hand-pick our phone card selection to offer the best of both low cost and reliability. Don't be fooled by other's low teaser rates. We pioneered instant email calling card delivery in 1999, with over 600,000 sold as of September 2006!
<br /><br />
<strong>How to use this web site</strong> Use Get Best Rates to choose your phone card, then receive your virtual phone card purchase by email. For a physical card, print the email containing the card image. Login to your account 24 hours a day to check PIN information or to reorder</p>
</div>
</div>
<div style="color:#ffffcc;float:left;clear:none;margin-left:20px;width:460px;">
<div style="background-color:#006699;margin-top:30px;height:10px;padding:3px 10px 3px 10px;border:1px solid black;border-bottom:0px;">FINDING
THE BEST PHONE CARD</div>
<div style="float:right;clear:none;padding-top:10px;padding-left:3px;padding-right:3px;width:209px;height:158px;">
<script type="text/javascript" language="JavaScript" src="http://www.kqzyfj.com/placeholder-1405157?target=_top&mouseover=N">
</script>
</div>
<div style="padding:10px 5px 30px 5px;text-align:justify;background-color:#7691d4;border:1px solid black">
<p style="font-size:14pt;padding-left:5px;margin-bottom:-5px;">Is your need for</p>
<p style="line-height:1.5em;white-space:nowrap;font-size:.75em;">
<font face="Arial">► </font> International calls from the U.S.?<br />
<font face="Arial">► </font> International calls to the U.S.?<br />
<font face="Arial">► </font> Calling within the U.S.?<br />
<font face="Arial">► </font> Calls while traveling?<br />
<font face="Arial">► </font> Specific recommendations?<br />
<font face="Arial">► </font> Wireless/cell phone refill PINs?
</p>
</div>
</div>
<!--
<div align="center">
<p class="sectionheading"><a name="phonecards" id="phonecards">Phone Cards</a></p>
<a href="http://www.kqzyfj.com/3566vpyvpxCFEKIDFLCEDGDGMLF" target="_blank" onmouseover="window.status='http://www.zaptel.com';return true;" onmouseout="window.status=' ';return true;">
<img src="http://www.lduhtrp.net/o4101r6Az42ORQWUPRXOQPSPSYXR" alt="Buy the best phone cards at San Jose Cell Phones" width="300" height="250" border="0"/></a></div>
<br />
<hr align="center" width="25%" />
<div style="text-align:center;margin:0 auto;margin-top:25px;"><a class="button" href="#top">Top of Page</a></div>
<br />-->
</div>
</body>
</html>
The CSS: Code: html,body
{
height:100%;
}
body
{
background-color:#ffffff;
border: 2px #279DA4 solid;
font-family:'Berlin Sans FB Demi', 'Berlin Sans FB', Verdana,'Trebuchet MS',tahoma, sans-serif;
font-size:10pt;
}
.container
{
width: 500px;
padding: 5px;
margin:0 auto;
border: 1px solid #ccc;
background: #fff;
margin-bottom:10px;
}
Is it possible to put a smaller background image on top (like in layers) of my old background image? I have a background image, but I want to put a smaller image on top of that one, but for it to be treated also as background image. This image is a black vertical rectangle, but is faded on the edges to give a transparency, so its a .png. So ultimately what I am trying to do is put this black rectanlge on top of my original background image and with the transparency on the edges of this image, be able to see my original background image. How can I do so? Also what I was thinking was that this faded background would be scaled to fit different screen sizes, so do "width: 75%"? Just so that it ALWAYS stays at 75% no matter what screen size it is viewed on. Is this the right approach towards getting this result? Hi, im new to this so sorry for my lack of knowlage. Anyway, I have made a new directory on my website to house our gaming reviews I have copied exactly the same image directorys that work on our main directory in there and the images show up when previewing on my pc but not when i upload to the web, also appartnly no images or styles work in IE? www.gameoracle.co.uk help much appriciated Hello everyone, I am currently working on a website that will have a simple gradient border (something like an "outer glow" from Photoshop) along the border of a nested table in the page. The final result will be a simple box with data centered in the middle of the page... However, my question is more related to programming in general. I have two options: 1. Have a linear gradient (1 px by 5 px) which is rotated in the 4 cardinal directions, and then tiled all around the page. Also there will be corners (5 px by 5 px) on, you guessed it, the corners. 2. Creating tables, for instance: //"invisible" is a font class with size="1px" <table class="invisible" cellpadding="0" cellspacing="0" width="710"> <tr height="100"> <td width="1" bgcolor="#000000"></td> <td width="1" bgcolor="#333333"></td> <td width="1" bgcolor="#666666"></td> <td width="1" bgcolor="#999999"></td> <td width="1" bgcolor="#CCCCCC"></td> <td width="1" bgcolor="#FFFFFF"></td> <td width="700" bgcolor="#FFFFFF"> <!-- TemplateBeginEditable name="body" --> SITE CONTENT HERE <!-- TemplateEndEditable --> </td> <td width="1" bgcolor="#FFFFFF"></td> <td width="1" bgcolor="#CCCCCC"></td> <td width="1" bgcolor="#999999"></td> <td width="1" bgcolor="#666666"></td> <td width="1" bgcolor="#333333"></td> <td width="1" bgcolor="#000000"></td> </tr> </table> which recreate the same action as tiling the gradient along the outside edges using the simple HTML colors. Which, from the standpoint of REDUCING actual work done by the server, would be the more effective (not my time, which clearly option 2 takes more of). I know very little about image compression, and how the whole process works for calling up images from a server. Any explanation is appreciated. Thanks again, BlitzKampf I'm currently in the process of rebuilding my website and I'm having some trouble. I'm looking to get the page to look like this: http://img170.imageshack.us/img170/5833/designwh9.png This is what I'm at right now: http://www.bclw.ca/content/index2.html The buttons (unlike in the image design) are not touching each other. Is there a way to do this only using HTML? Or am I going to have to purchase one of those Website Design programs? Thanks for any help you can give! I am still new to html so still learning the ropes. Heres what i have, im trying to get the gallery image next to the home image, instead its right below it by X pixels.. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head><title> Profile</title></head> <body background="white"> <table cellpadding="0" cellspacing="0" border="0" align="center" > <tr> <td valign="top" width="94" height="42" > <div style=" margin-right:600px; margin-top:150px "><img src="images/home.jpg" alt="" border="0"></div> </td> </tr> <tr> <td valign="top" width="94" height="42" > <div style=" margin-right:600px; margin-top:150px "><img src="images/gallery.jpg" alt="" border="0"></div> </td> </tr> </body> </html> how can i put images on my page using html or css where you cant right click and copy the image or see the image url. (kinda like a background image, but where i can add several of them) On Opera when you place the mouse on an image it shows the file On Mozilla and Netscape it doesn't show ALT at all. Can this be sorted out? Thks Hi, I'm kinda new to HTML.. I want to add 2 different images aligned horizontally, but one would be aligned on the left of the page, and one to the right.. how would I do that? Hi, Does anyone know a code that can be used so that if there is no image to go into an image box the box will be invisible, i.e. there won't be a little box with a cross in it. Thanks Colin Hi My site is at www.bigbadroo.com.au/dht/index.php It's looking ok in most browsers at the moment, but I have a couple of questions: 1) why is ie6 cutting off and repeating the background images? 2) why is ie6 putting big red crosses and borders on my three main button images? 3) how do I get the DIV box1 to extend all the way to the top of the screen in IE6 and IE7? Thanks for your time and help guys. Shaun Hello! I'm new to these forums and am looking for a little help with my website I'm currently building. I'm trying to look for a unique way to display my images on a page. One particular way I'm thinking of is to hover over a tumbnail of the image and it pops up bigger so you can see it. Is there any code out there for that? Can't seem to find the discrepancy within the code. All the image files are in the same location. As stated in the title, some images appear and some do not. http://webpages.charter.net/projects...vertmedia.html Thanks for you help, -=Devil Duck=- I want to try a couple of different approaches to putting medieval scroll-like images behind a menu and the body text of a site I am working on. I vaguely remember that there are separate commands to put images above, behind, and below a list. (Thinks something like scroll_top.gif, scroll_body.gif, scroll_bottom.gif). Can anyone help with that? Also, isn't there a way to do the same think with a div, eg: - image1 at the top - image 2 (repeating) as the body - image 3 at the bottom Thanks much as always! Joshua Hi, I currently have a bit of a problem, you can see for yourself at http://el-nath.net/forum Notice that all the images are around 3-4 pixels off their place that they're supposed to be at. Can someone please view the source code and give me a solution? Hello, Yes on the same computer, I am quite happy with FF, but when I check the same image on IE, it seems lower quality image even though it is the same image on the same site!! |
|||||||