I create image tag in HTML
var img = document.getElementById('image');
alert(img.width)
<div width="500">
<img id="image" width="100%" height="1"></img>
</div>
In all browsers img.width will be 500px. But in Firefox it will be 0. But if set the src in image tag it work.
Is it possible to set 1px transparent image without using any files(png, jpg, ...)
var img = document.getElementById('image');
alert(img.width)
Thanx to LinuxDisciple I found a solution to the problem
<div width="500">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" id="image" width="100%" height="1"></img>
</div>
Related
I am building a website for the first time. I have a basic question regarding how the pages appear on different devices.
I have a row of three , which each contain an image, e.g.:
<div class="img_box"><img src="1.png" class="prod_img" border=0 height = 343 width = 298/>
<div class="img_box"><img src="2.png" class="prod_img" border=0 height = 343 width = 298/>
<div class="img_box"><img src="3.png" class="prod_img" border=0 height = 343 width = 298/>
As you can see, the three images are each 298px wide. When I view on my laptop, all three fit on one row. When I look on other machines, sometimes the third image is on a new row.
This makes sense to me, as I guess that the screen resolution on the other machines is lower or something.
My question: what is the correct way to ensure that all three images remain in one row when viewed on a computer? I understand that each image would probably have to be on a row of its own when viewed on a cellphone. There must be a standard way to deal with this. Do I give the width of the objects in % instead of pixels?
Any help is appreciated.
This is happening because you're using images of fixed size rather than using a percentage which allows them to resize allowed by the CSS and the device used to view the web page.
Currently your images width total is 896px and this excludes any padding that you may have added in the CSS. Therefore devices or windows smaller than this number will result in multiple line breaks. To overcome the issue as previous mentioned you want to use percentages.
Below is an example demonstrating how you can adopt width in precentage instead of width in pixels.
/* CSS */
.image-container {
width: 100%;
padding: 0;
margin: 0 auto;
}
.image-container img {
padding: 4px;
width: 100%;
float: right;
}
.image-container.two img {
width: 50%;
}
.image-container.three img {
width: 33.33%;
}
.image-container.four img {
width: 25%;
}
<!-- HTML -->
<!-- 1 image -->
<div class="image-container">
<img src="1.png" alt="Image Description 1">
</div>
<!-- 2 images -->
<div class="image-container two">
<img src="1.png" alt="Image Description 1">
<img src="2.png" alt="Image Description 2">
</div>
<!-- 3 images -->
<div class="image-container three">
<img src="1.png" alt="Image Description 1">
<img src="2.png" alt="Image Description 2">
<img src="3.png" alt="Image Description 3">
</div>
<!-- 4 images -->
<div class="image-container four">
<img src="1.png" alt="Image Description 1">
<img src="2.png" alt="Image Description 2">
<img src="3.png" alt="Image Description 3">
<img src="4.png" alt="Image Description 4">
</div>
I am trying to understand what I'm doing wrong,
I have two elements, image withing anchor with no style.
some how the anchor dose not cover the image area.
example: http://jsfiddle.net/L4ShV/1/
<a href="javascript:void(0)" id="downloadLink" >
<img src="http://toonimo.com/testing/clients_tests/somoto/flv_player/images/nlp/free_download_btn.jpg" border="0" style="width: 373px;height: 120px;" />
</a>
<div>
<h1>a dimantions:</h1>
width: <span id='width_c'></span><br>
height: <span id='height_c'></span><br>
<br>
when clearly its not possible!
How can i get the Real height?
</div>
<script>
var el = document.getElementById('downloadLink');
document.getElementById('width_c').innerHTML = el.offsetWidth;
document.getElementById('height_c').innerHTML = el.offsetHeight;
</script>
any reason or solution for this problem?
That is a normal behaviour of anchor as it expects for block-level elements. You can float a to cover the image.
<a href="javascript:void(0)" id="downloadLink" style="float:left">
There is a tag in 150x130:
.listings ul li a.thumb{
float:left;
width:150px;
height:130px;
border:#ededed 3px solid;
}
When I save an image I check the image's width and height. with==150 or height==130. And in view:
<a href="#" class="thumb">
if ( checking with is full )
{
<img src="#Url.Content( Path.Combine( "~/Uploads/Products/", #item.ImagePath ) )" style = "width: 150px;" alt="" />
}
if ( checking height is full )
{
<img src="#Url.Content( Path.Combine( "~/Uploads/Products/", #item.ImagePath ) )" style = "height: 130px;" alt="" />
}
</a>
There are images in this <a> tag in different sizes. For example, 100x130, 70x130, 150x140, 150x80 etc. But one of sizes of image equals to one of sizes of a tag. (150 or 130). Square images are not a problem, but different sized images seem to go in bottom or top, right or left side in the <a> tag.
How can place all size images center of the tag?
First, you need to convert the <a> to a block element with display:block.
Second, I would set your thumbnail as a background image instead and use background-position: center center which would cente rit vertically and horizontally
<a href="#" class="thumb"
style="background-image: url('#Url.Content( Path.Combine( "~/Uploads/Products/", #item.ImagePath ) )')"> </a>
Maybe add display: block; to both a and img and then add margin: 0px auto; to your img.
There are differences between HTML 4.01 and HTML5 in the tag.
The layout attributes: align, border, hspace, and vspace were deprecated in HTML 4.01, and are not supported in HTML5!
You have to wrap your tag in an other one and make your CSS do the align like this exemple:
<!DOCTYPE html>
<html>
<body>
<article style="text-align:center">
<img src="img/test.png" alt="test" />
</article>
</body>
</html>
I am implementing an input text with an onkeyup that calls a JavaScript function. I have to put that text over an image, so I was thinking to use innerHtml inside a div that is on the image.
The div:
<div id="image3" style="position:absolute; overflow:hidden; left:519px; top:423px; width:474px; height:205px; z-index:4">
<div id="uno" style="z-index:20">
<img src="images/base-personalizzazione.png" alt="" title="" border=0 width=474 height=205>
</div>
</div>
The input:
<input name="formtext1" id="ft1" style="position:absolute;width:571px;left:319px;top:194px;z-index:6" onkeyup="go(this.value)">
The JavaScript:
<script type="text/javascript">
function go(asd){
document.getElementById('uno').innerHTML=asd;
}
</script>
When I write inside input text image will disappear and text appear with background white. Can you help my work out why this happens and what I can do about it?
Setting the innerHTML removes what used to be in the div.
One way to fix this would be to change the html to
<div id="image3" style="position:absolute; overflow:hidden; left:519px; top:423px; width:474px; height:205px; z-index:4">
<div id="uno" style="z-index:20">
<div id="input"></div>
<img src="images/base-personalizzazione.png" alt="" title="" border=0 width=474 height=205>
</div>
</div>
Then use innerhtml on the input div instead.
On this site> http://upcycledonline.com/test/Site/defaultUpCyc.html when I view it in chrome the rightEdge image looks like it is pushed down by something. I have rearranged the code several times and tried the image in different places with no luck. Help please!
Should I throw it in a div and try to make it do something that way?
You can change the markup? If so, do this:
<div id="header" style="overflow:auto">...</div>
<img src="leftEdge.png" style="float: left;">
<div style="float:left;">
<img src="topEdge.png" style="float: left;">
<div id="content">...</div>
<img src="bottomEdge.png" style="float: left;">
</div>
<img src="rightEdge.png" style="float: left;">
Note that:
Nothing inside the new floated div should itself be floated.
You need that overflow:auto on the header
You will have to adjust the height of the content div