HTML - Do Not Display Image

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

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

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

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.

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

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.

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

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.

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

Hi guyz,

i have a query

Mouse over the datagrid cell display tooltip or panel to display information

but only using HTML and CSS not using javascript.
can anyone help me. because im gonna use it on htmleditor on c# desktop application

thax before

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 />