I have an image like this one:
<img class="alignnone size-full wp-image-262" src="http:/localhost/wp-content/uploads/2017/10/myimage.png" alt="" width="352" height="343" />
I would like to put text in a box and this appears when the mouse hovers on from the image. How is it possible to make it?
You can use:
<img ... title="TEXT HERE">
Here's a quick JSFiddle demo for you.
https://jsfiddle.net/23vbh1ov/
<img src="http://dev.benchanmusic.com/wp-content/uploads/2017/07/cropped-cropped-me_blackandwhite.jpg" alt="" width="352" height="343" title="TEXT HERE" />
You should also fill in the "alt" property, as it's used for search engine indexing as well as if the image itself fails to load for any reason.
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 want to edit this picture.
http://2.bp.blogspot.com/-42H3onuga5o/UYs7FXqbSlI/AAAAAAAABHU/Pv2iKLwVl4s/s1600/aboutus.png
I see in the edit blogtemplate html editor:
<li>
<div class='menu-abs-bg background-color'/>
<div class='menu-specs'>
<div class='home-icon'/>
<a href='http://rivadotaku.blogspot.com/' title='Home'>Home</a>
<span>Rivadotaku's Blog</span>
</div><ul/></li>
<li>
How to change the picture? You can see in the www.rivadotaku.blogspot.com, in the right bar.
I just a newbie, i only can edit a picture in this html
<img alt='' src='http://2.bp.blogspot.com/-S0aK8YBRU20/UYzIzLBILSI/AAAAAAAABIY/np2T4NYR9ng/s320/article1.png'/>
<a href='http://www.templateism.com' style='background-color: rgba(108,203,103,.9);'>templateism.com
Please help me, sorry for bad English.
Thank you
I'm not sure about what you are tryng to do. If you just want to show another picture instead of the picture you are showing right now, you have to change the src attribute.
<img alt='' src='http://newlink.com/newimg.png' />
I am in the process of implementing a fancybox gallery on a website I am developing - for some reason though the first 2 images appear at different heights of the page:
http://leedsragfashionshow.co.uk/wp/index.php/committee/
I am experiencing this on Chrome and on Firefox, any ideas?
First, the tile of your question is misleading because a fancybox gallery is when the images are already displayed inside fancybox and not before. In your case, the issue is with the thumbnails of the gallery that has nothing to do with fancybox.
Anyway, why is this happening? This is because you are adding a html line break <br /> after each link <a> that wraps the image <img /> tag like:
<a rel="group" href="http://leedsragfashionshow.co.uk/wp/wp-content/uploads/2012/committee/1.jpg" class="fancybox"><img alt="" src="http://leedsragfashionshow.co.uk/wp/wp-content/uploads/2012/committee/1.jpg" class="committee"></a><br />
<a rel="group" href="http://leedsragfashionshow.co.uk/wp/wp-content/uploads/2012/committee/2.jpg" class="fancybox"><img alt="" src="http://leedsragfashionshow.co.uk/wp/wp-content/uploads/2012/committee/2.jpg" class="committee"></a><br />
...etc.
If you are already floating the images, then you just need to remove those line breaks <br />. See this DEMO with no <br /> tags.
hey, i have a .net C# function thats write html image links code such as:
<img src="..." />
and show it by asp:literal,
it works fine in Explorer and Firefox but in chrome the clicking is disable,
any ideas?
example code:
<div class=\"whitebox\" style=\"width:500px;\">
<div style=\"float:left;\">
<a href=\"../reader/Default.aspx?u=4&t=2&sr=f-53D\">
<img width=\"75px\" height=\"75px\" src=\"http://www.Knu.com/main.jpg\" />
</a>
</div>
</div>
The only problem I can see with that is if you're somehow outputting it exactly like that, with the C# escaping included.
Here's the site: www.red-tuxedo.com
I want the "Red Tuxedo" text to sit next to the logo, not below, and I want to get rid of that hard rule that runs through the logo. My CSS / HTML skills aren't up to it. I completely destroy the column layout when I change the text and I can't find the hard rule in the code. Tried adjusting the gif (cut off the bottom in Photoshop) and that didn't help.
I did write to the person who created the template; haven't heard back after several days. Would like to get this fixed before I start adding more pages.
thx
One way is to move the logo within the #logo div:
<div id="header-logo">
<div id="logo"><img height="60" width="60" alt="Red Tuxedo Logo" src="logo_red_tuxedo.gif" id="logo_red_tuxedo"/><span class="red">Red</span>Tuxedo</div>
<form action="#" class="search" method="post">
<p><input type="text" class="textbox" name="search_query"/>
<input type="submit" value="Search" class="searchbutton" name="search"/></p>
</form>
</div>
Try changing the div (id=logo) so that it includes the logo image and the text and add align='absmiddle' to the image. I'd suggest CSS but it looks like it has fixed attributes on it anyway. The "rule" looks like it is coming from the background image for the body element. You'd need to update the file bg.gif to modify it, I think.
<div id="logo">
<img id="logo_red_tuxedo" src="logo_red_tuxedo.gif"
alt="Red Tuxedo Logo" align="absmiddle" height="60" width="60">
<span class="red">Red</span>Tuxedo
</div>
To move the text, I'd put the image inside the logo div, the way dmondark suggested. As for the hard rule, it's part of the background image for the body, bg.gif. Here's an edited version I made that doesn't have it.