There are two img tags in my aspx page as shown below.
<img src="../Images/icon1.png" class="img-style" alt="Icon" />
<img src="../Images/icon1.png" class="img-style" alt="Icon" />
Both img tags are using the same css class and same image as the src attribute.
There came an argument like "Removing the src attribute of each img tags and adding the same image as the background-image in the CSS class is better and performance efficient".
I need an expert opinion regarding the above statement with the correct reason. If I remove the src attribute and add the image as background-image in the "img-style" css class, how it helps to improve performance?
Please help. Thanks.
Got a prompt reply from : http://forums.asp.net/post/5739756.aspx
Thanks to AidyF.
Related
I am using img tag but its not working this is my code
<img src="resources/images/dsr_sprites.png" ></img>
and I have also use that type
<img src="resources/images/dsr_sprites.png" />
but when I open in firebug that have no close tag and we we use that code for itextpdf its also showing error message that img close tag is missing
Img tag is self closing, also on html 5 you can if you want, not closing the tag.
xHtml:
<img src="image.jpg" alt="My image" />
Html5
<img src="image.jpg" alt="My image">
Please dont forget the alt attribute.
i think you use this type your image tag:
<img src="../resources/images/dsr_sprites.png" />
It looks like you're using the incorrect path, so your HTML can't find your image anywhere.
The second tag is correct, but your path needs to be relative. Check out this article for more on the difference between absolute and relative paths.
<img src="../resources/images/dsr_sprites.png" alt="Sprites"/>
I am curious as the best (only?) way to go about this.
I was asked to make a text link, display an image (under it) upon rollover and of course disappear when you rolloff the link.
(the original personal used some in-line style that broke the page, instead of declaring a block).. they also tried to use an IMAGE MAP to make the displayed image a LINK/clickable, and have a different/unique URL that the TEXT link used to display the image.
I made the style:
/*custom client requested CSS styling/functionality*/
a.imageDisplay img {
display:none;
}
a.imageDisplay:hover img {
display:block;
}
Here is a snippet of the HTML I am try to add this functionality to:
<a class="imageDisplay" href="#">Client Name XYZ<img src="/UserFiles/image/ALLSAtestpage3.jpg" usemap="#allsa" /><map id="allsa" name="allsa"><area coords="12,113,123,142" href="http://www.nike.com/" shape="rect" target="_blank" /></map></a><br />
My question is: what is the best way (better way) to add a LINK/URL to the image that is being displayed?
Because the image is INSIDE the anchor/link tag.. is will also be/get the same URL as the target when clicked....yes?
Anybody have some SIMPLE ideas as a work around?
(I really hate those MAP tags anyways) :)
thanks!
Is this simple?
<span class="txt-img">
<a class="txt" href="#1">Client Name ABC</a>
<a class="img" href="#2"><img src="http://placehold.it/200/0000cc/" /></a>
</span>
.txt-img {position:relative;}
.txt-img .img {position:absolute; display:none; left:0;}
.txt-img:hover .img {display:block;}
FIDDLE: http://jsfiddle.net/46Tf6/
I am storing images in a folder on a localhost for asp.net website.
The image is there and and the src attribute is correctly formed but the image is not displayed in img element.
can some body tell me what can be the issue or missing.. when I check the image in the url of brower it is displayed properly
localhost:xxxx/TenModified/setX/8fd7976b-d4b0-467a-bc3e-bf2a51d60299.Jpeg
This is my markup for the element
<img id="ctl00_ctl00_ContentPlaceHolder1_ContentPlaceHolderChild_ListViewThumbs_ctrl1_ctl03_Image1" src="localhost:59657/ProfileTenModified/setP/8fd7976b-d4b0-467a-bc3e-bf2a51d60299.Jpeg" style="border-width:1px;border-style:Solid;height:172px;width:172px;" alt="">
You don't need to include the domain and port. The following will work fine for the src:
/ProfileTenModified/setP/8fd7976b-d4b0-467a-bc3e-bf2a51d60299.Jpeg
or the full tag:
<img id="ctl00_ctl00_ContentPlaceHolder1_ContentPlaceHolderChild_ListViewThumbs_ctrl1_ctl03_Image1" src="/ProfileTenModified/setP/8fd7976b-d4b0-467a-bc3e-bf2a51d60299.Jpeg" style="border-width:1px;border-style:Solid;height:172px;width:172px;" alt="" />
use this:
src="ProfileTenModified/setP..."
full code:
<img id="ctl00_ctl00_ContentPlaceHolder1_ContentPlaceHolderChild_ListViewThumbs_ctrl1_ctl03_Image1" src="ProfileTenModified/setP/8fd7976b-d4b0-467a-bc3e-bf2a51d60299.Jpeg" style="border-width:1px;border-style:Solid;height:172px;width:172px;" alt="" />
You should remove the "localhost:59657" from the path. You really don't need it, just be root relative. This will save you a lot of time when you launch your application not having "localhost:59657" in there and just being root relative. You won't need to change all of your paths. Same holds true for any anchors. Make those root relative too.
<img id="ctl00_ctl00_ContentPlaceHolder1_ContentPlaceHolderChild_ListViewThumbs_ctrl1_ctl03_Image1" src="/ProfileTenModified/setP/8fd7976b-d4b0-467a-bc3e-bf2a51d60299.Jpeg">
Try to use Prefix. Http or Https
http:// localhost:xxxx/TenModified/setX/8fd7976b-d4b0-467a-bc3e-bf2a51d60299.Jpeg
<img src="http :// domain:port/TenModified/setX/8fd7976b-d4b0-467a-bc3e-bf2a51d60299.jpeg" />
Your link is is missing the two forward slashes in the protocol?
<img id="ctl00_ctl00_ContentPlaceHolder1_ContentPlaceHolderChild_ListViewThumbs_ctrl1_ctl03_Image1" src="localhost//:59657/ProfileTenModified/setP/8fd7976b-d4b0-467a-bc3e-bf2a51d60299.Jpeg" style="border-width:1px;border-style:Solid;height:172px;width:172px;" alt="" />
and also the slash for the closing of the image tag
I'm building a web site and I'm using HTML5. I'd insert into my header an img that is my company's logo. In terms of efficient and correctness it is better set up css propriety as background-image: url("logo.gif") in my css style or including in the html file
<header>
<img src="logo.gif" alt="logo" />
</header>
It is best to include the image as an img tag, not a background-image.
This means that if the client has disabled CSS on their browser, or it doesn't support CSS, they will still be able to see the logo at the top of the page.
This would also mean you could make the logo a link to the home page, which has become a general usability point for websites these days:
<header>
<img src="logo.gif" alt="logo" />
</header>
For more information on this sort of situation, see this popular StackOverflow post:
When to use IMG vs. CSS background-image?
that depends.
If your logo should be clickable then include it in the HMTL. (usebility)
If it is only present for design purposes go with the CSS.
It is generally a better idea to define everything related to the appearance of the Website in the CSS.
html:
<header>
<div id="company_logo"></div>
</header>
css:
#company_logo{
width:50px;
height:50px;
background-image:url();
}
Unless you need to have some contents over your logo, I'd go for the <img> tag (it is also screen reader-friendly provided you have the "alt" text).
Background images can not be printed, if your site has the purpose of being printed, then your logo won't display.
Remember that a logo is a content, and a background is a style. Using a background as a logo is not semantic.
I want to create an element using DIV and CSS like below:
Create By: <avatar image 16x16> Prashant
Can anyone tell me what will be the CSS and DIV code for above type of layout. I don't want to use tables for this, DIV and CSS only.
In Digg listing the same kind of display can be found. I tried but not able to make the "username" central align in respect of the avatar image.
<div>Created by: <img src="/images/avatars/prashant.png" alt="" /> Prashant</div>
and
img {
vertical-align: middle;
}
should do the job.
vertical-align unfortunately is not handled very consistently by some of the older browsers (pre-2005, but then yet again IE6 is still around), but David's answer is correct from the standards view.