HTML - Question Regarding Image Display
Hi Guys
Is it possible to display an image at different sizes depending on monitor resolution? For example If 1024 x 768 displayed i could have a certain width and height and if 1920 x 1080 displayed it would have a different width and height. Its more to make sure that text on my image does not stretch out and to make sure looks constant on different resolutions. Is there some coding i could do to make sure this happens? Thanks J Similar TutorialsIs there a code out there that I can use to image a photo in a picture, with actually showing an image? I am working on a project for school and I'm having problems displaying an image. Would someone be willing to look at my code and see why this is happening? I could send it through a PM. ANY help would be greatky appreciated. Hi folks, I've got following problem: image won't display and will display under IE6. Here's what I mean (white logo BizTelligence Consulting): Take a closer look - IE shows that image can't be loaded (doesn't exist or something) but loads it. Additionally, as you can see, image is stretched. Any ideas why this happens? Link to website: http://biztelligence.ch/ So I'm not completely new to html website design, but I am building a site and was just going to throw up a banner and some text saying coming soon. So the text displays fine. But I cannot for the life of me figure out how to get the images to display. I have checked and double checked the source code and it should be fine. I manually logged into my ftp and the file is in the directory so it shouldn't be an issue of not being able to find it. Can I get any help at all? Here is the link: http://www.huntlink.net my code is as follows: <!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=utf-8" /> <title>Untitled Document</title> </head> <body> <table width="800" border="0" align="center"> <tr> <td><img src="images/mainbanner.png" width="800" height="150" /></td> </tr> <tr> <td align="center"><h2>Coming Soon!</h2></td> </tr> </table> </body> </html> Any help would be great. I don't know why the image isn't displaying. It works when I preview it in dreamweaver also. Hi there, I have a problem at: Link removed The problem is viewed on Internet Explorer only, There is no problem on Safari and Firefox. in IE when you open the above link the first image is behind the second image, unless you hover the mouse over the image. It happens only occasionally in IE as well. When you hover the mouse over, the image goes to the correct place. I have looked at the code and see no problems. Can somebody please help me? Any help would be great Thanks i know this is prob somethin simple but iv tried everythin n cant get the image to display...... i no my code is right, its got to do with the actual pic, i have the right file type(gif), i have tried resizing it, saving it under diff file types by using gif converters!! but nothing seams to work... and yet the other pic's beside it work!! originally it was a micro visio diagram.... when i load the page into IE the normal gif,jpg images work. but when i right click on the image thats not working and go to properties its says not associated! plz help Cindy xx Hi there I am an HTML novice that can usually find the answers after some google time, not this time though. I've been searching the web for quite some time to get this done, hopefully one of you can help me out. If so, I will gladly give you credit when my little digital art project is done. Here's what I am trying to do (simplified): - I have image files (.JPGs) named 1200.jpg, 1201.jpg, 1202.jpg, 1203.jpg, 1204.jpg, etc. Each one representing a minute in the day. - Is it possibly to have a browser display 1201.jpg at 12:01, then display 1202.jpg at 12:02 and so on? Reading from the system clock. Hopefully this makes sense. Thanks for your time and, um, keep on HTML-ing. Dorron M email@dorronm.com Hi, Could you pls anyone tell me how to display an image as identity information. for example while opening google.com, it will display an image just before the link like "g". Thanks hi, In my html page , I have a div tag of fixed size (100px*75px) and i want an image (width=100px, height between 50px to 70px) to be displayed vertically centered in the div. If anyone has done this before Please share the solution. Restrictions: 1 - use html img tag. 2 - don't use CSS background-image property I tried below thigs but they didn't work. 1 - set style="vertical-align:middle" in <img> 2 - move <img> in 1*1 table and set valign= center in <table> Below is my html code: <div id="gallery"> <div id=""> <img src="sample_100_50.jpg" /> </div> </div> and the CSS code: .gallery{ height: 75px; overflow: hidden; position: relative; width: 100px; border:1px solid #DDDDDD; } Thanks in Advance Arpit I'm hoping for some help with the code to solve my problem. My site has a page devoted to a series of products. I have the names of the products running down a set of cells on the left side of a table. The product names will be linked to html pages dedicated to each of those products. I've got that under control, no problem. I'm trying to add the extra spiff of a common image area in a large merged cell just the to the right of the navigation cells and I'd like for an image of the specific product to come up in the image area when a user mouses-over the navigation cell. For example, the first nav cell is for "Lathes," so when a user mouses over the word Lathes I want a picture of a lathe to appear in the image area. When they mouse over the nav for bandsaws, I want an image of a bandsaw to come up in the same image area, etc. Is anyone willing to suggest some code to accomplish this little trick? It would be a great help. Thanks. Hi. I am making a template for my site, and i really need my title image to display at the very top of the page, so the top of the image touches the bottom of the tool bar of the browser. This is currently what my page looks like www.skyhigh3d.com/testpage.html I would like the top of the black image to touch the top of the browser, so there is no background visable above the image. The image and navbar are in a table, so really i need to table to be at the very top. I know this is possible becuase i have seen many sites with the image at the very top, but no matter what i do it doesnt seem to work. Your help would be very much appreciated. Thanks -JC Hello, I am trying to command a mouse-rollover to display a text under the photo that is to be mouse-rollovered. I know how to display a second picture to showed up upon mouse-rollover on a first picture, but I do not know how to display a text message upon a picture mouse-rollover. Thank you kindly guys Hi., How to display the image in textbox or Text area in compressed format,according to the field size(textbox or Text area). any suggestions will be helpful to me. thanks in advance. Hello Everyone, I've a gif file that I want to display on my jsp page. The file is located on the server If I give something like <img src="\\filer\home\mine\myimage.gif" alt="not found" title="Image"> then "not found" is shown on jsp page I even moved the image to my c: dir and tried this <img src="C:\myimage.gif" alt="not found" title="Image"> but that didn't worked either. Can someone please tell me where am I supposed to put the image file. Thanks. As a part of a project I am doing I want to display images on a website. The width/height of the image displayed on the screen should depend on the orientation of the image. The idea is to make the longer side 150px, so if width is greater than height then width=150px, else if height > width, then height=150px. Is there a simple way of doing this? My solution to this is to store the image height and width in a database (I already need to create a database for images), and am using onLoad attribute to change the width/height based on a boolean parameter which tell the orientation of the image, a test version of the code is here (wait for the image to load) http://www.confusionart.com/public/test.html However, as you can notice, first the complete image is loaded and then resized to the desired size. i.e. there is a unnecessary switching of sizes on screen. Is there any way to avoid this. Hello, My name is Eli and I cannot figure out why in the 2nd and 3rd rows of this HTML table there are empty spaces between the columns, making these rows go over the table width limitation of 770. I would really appreciate some help, as it is getting very frustrating and I am sure there is a very simple solution that I am missing. I've searched threads but could not find the right answer. Here is the table HTML code: <table border="0" align="left" cellspacing="0" cellpadding="0" width="770"> <tr> <td width="770" height="1" colspan="2" bgcolor="#FFFFFF"><img src="http://yst.sale-la-vie.com/images/spacer.gif" alt="spacer" width="4" height="1" border="0" align="middle" /></td> </tr> <tr> <td colspan="2" align="left" valign="top" bgcolor="0"><img src="http://yst.sale-la-vie.com/images/main-mid.jpg" alt="" border="0" /></a></td> <td align="left"><img src="http://yst.sale-la-vie.com/images/right-mid.jpg" alt="" border="0" /></a></td> </tr> <tr> <td align="left"><img src="http://yst.sale-la-vie.com/images/mid-necklaces-img.jpg" alt="" border="0" /></a></td> <td align="left"><img src="http://yst.sale-la-vie.com/images/mid-earringss-img.jpg" alt="" border="0" /></a></td> <td align="left"><img src="http://yst.sale-la-vie.com/images/mid-goodlook-img.jpg" alt="" border="0" /></a></td> </tr> <tr> <td align="left"><img src="http://yst.sale-la-vie.com/images/mid-bracelets-img.jpg" alt="" border="0" /></a></td> <td align="left"><img src="http://yst.sale-la-vie.com/images/mid-summer-img.jpg" alt="" border="0" /></a></td> <td align="left"><img src="http://yst.sale-la-vie.com/images/mid-newlook-img.jpg" alt="" border="0" /></a></td> </tr> </table> Thanks and best wishes, Eli Some really weird situation: Please look at this page here. Scroll down to the footer. You will see a GIF image right? In alle browsers BUT firefox, this displays fine.. in firefox its cancelled out for some vague reason. Thats weird right, but the weirdest thing is that only in firefox (when looked to at firebug) there is something i only can describe as a "phantom class" Its only visible in firefox, and it has a weird name " ednfltlufdujmlipsfpd" ... so, what the pancakes is going on? I need to display an image (size 1024x768) in IE explorer so when i hit f11 (kiosk mode) its full screen. Then I need that image to refresh every X seconds with out flickering on the screen. The file is a bmp and is about 5mb and only will be changed a few times a day by a program I wrote in Vb.net. It will write over the existing file so the webpage would pick up the changes when it refreshes. Codes I'v tried already: Code: <html> <head> <META HTTP-EQUIV="Expires" CONTENT="-1"> <META HTTP-EQUIV="refresh" CONTENT="10;URL="meta.htm";"transition"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>New Page 1</title> <style type="text/css"> html, body {margin:0; padding:0; width:100%; height:100%; overflow:hidden;} body {font-family:verdana, arial, sans-serif; font-size:76%;} #background{position:absolute; z-index:1; width:100%; height:100%;} #scroller {position:absolute; width:100%; height:100%; top:0; left:0; overflow:auto; z-index:2;} #content {padding:5px 300px 20px 200px;} p {line-height:1.8em; letter-spacing:0.1em; text-align:justify;} </style> </head> <body> <div> <img id="background" src="View.bmp" alt="" style="position: absolute; left: 0; top: 0" width="90%" height="90%" /> </div> </body> </html> and Code: <IMG src="OR View.bmp" name="refresh" Padding="0" Width="1024" Height="768" Scrolling="0"> <SCRIPT language="JavaScript" type="text/javascript"> <!-- var t = 120 // interval in seconds image = "OR View.bmp" //name of the image function Start() { tmp = new Date(); tmp = "?"+tmp.getTime() document.images["refresh"].src = image+tmp setTimeout("Start()", t*1000) } Start(); // --> </SCRIPT> However the first one flickers and the 2nd doesnt display in full screen. Any information or even pointing me in the right direction would help. I know almost nothing about java and html =x Here's a simple folder layout of my website: Website Folder contains: website.htm and images folder, which contains an image I want to be able to write the destination of my image based on where the website folder is located. In Visual Studio, it works when I type "/images/image.jpg", but when I open the project up directly in IE it doesn't find my images. I've looked around and tried "../images/image.jpg" and a few others with no luck other than changing the location to C:/folder/another/folder/websitefolder/images/image.jpg. My other webpage links work with the plain "webpage.htm", so I'm not sure why my images won't load without the entire location. seems like a cool board i looked over a few things and decided to ask my question here. i have an image map but it's not behaving like i expected it to. HTML Code: <img src="/pics/imagemaps/scroll2.jpg" width="400" height="600" alt="" usemap="#scroll1" /> <map name="scroll1"> <area shape="rect" coords="1,1,100,200" onclick="decode('A1',$tries)" nohref="nohref" alt="A1" /> <area shape="rect" coords="101,1,300,200" onclick="decode('B1',$tries)" nohref="nohref" alt="B1" /> <area shape="rect" coords="301,1,400,200" onclick="decode('C1',$tries)" nohref="nohref" alt="C1"/> <area shape="rect" coords="1,1,100,400" onclick="decode('A2',$tries)" nohref="nohref" alt="A2"/> <area shape="rect" coords="101,1,300,400" onclick="decode('B2',$tries)" nohref="nohref" alt="B2"/> <area shape="rect" coords="301,1,400,400" onclick="decode('C2',$tries)" nohref="nohref" alt="C2"/> <area shape="rect" coords="1,1,100,600" onclick="decode('C3',$tries)" nohref="nohref" alt="A3"/> <area shape="rect" coords="101,1,300,600" nohref="nohref" alt="B3"/> <area shape="rect" coords="301,1,400,600" nohref="nohref" alt="C3"/> </map> the problem i'm having is that i can't get the cursor to change. shouldn't it change signalling that something is clickable if i scroll over the image regions? any help appreciated. |