I am creating a website for the first time with Bootstrap3 and have a page with 3 images which will be links to galleries. These images are not thumbnails.
I have alternative images (B+W) for hovering and so my code currently changes the image from colour to B+W on hover.
I want to be able to also include a text overlay on hover so people will know to click through to the gallery. So, I'm looking to add text on hover to the B+W image. Alternatively, I would make the colour image less opaque and add text to that, if it's easier!
Here's my html code currently.
<img src="landscape.jpg" alt="Landscape" onMouseOver="this.src='landscapebw.jpg'" onmouseout="this.src='landscape.jpg'" class="img-circle img-responsive">
Thanks in advance.
try adding a title attribute :
<img src="landscape.jpg" alt="Landscape" onMouseOver="this.src='landscapebw.jpg'" onmouseout="this.src='landscape.jpg'" class="img-circle img-responsive">
Related
<html>
<h3> MY FIRST WEBPAGE </h3>
<H1> DESIGNING MY FIRST WEBPAGE </H1>
<title> MY FIRST TAB </title>
<img src="3333.jpg"
width="800"
height="500" >
<style>
body {font:12px Verdana,Arial; color #428bca; background-color:#5bc0de}
</style>
</html>
how to add boundary to image . ineed to knwo like how toadd a red coloured boundary to enclose the image in a table format
Add Borders to a Images using HTML & CSS
Using HTML/CSS to add borders to an image is easier than what you think. Before you add an image to your post in the text module, you need to switch to the text editor. Then, you will add the image and see the HTML code of the picture. This will look like the following images.

After adding the image to the text module, type this style=”border:5px solid #000000; padding:3px; margin:5px” to add the borders to your images. It will look like the next picture.

As result of that code, the image will look similar to the next picture.

Feel free to make any change to the border width, color, padding, and margin to your images. Also, you can change to the visual editor after you are done with the picture to see the changes that you’ve made. Let us know below if you have any comments or questions; we’d love to hear from you.
I currently use retina.js to load Retina-optimised images on my website.
It is great, but renders redundant all thumbnail links to larger images (which load with Fancybox).
My question is how can I disable all links to images if Retina is detected? (At least until I have a higher-res camera.)
Regards
Paul
If you want just some images on your page to be excluded from retina.js, you have to add the data-no-retina attribute to the tag, like this:
<img src="yourImage.jpg" data-no-retina />
If you want to disable the links created by Fancybox, you have to modify the Fancybox source itself.
This is my image syntax...
[{{ :image-link.png?200|This is the caption.}}]
Which adds the image, right aligned.
Your help is greatly appreciated... Thank You!
The DokuWiki syntax you quote shows you are using the Image box plugin - which allows a caption, but produces a blank alt tag.
e.g. [{{ :software:contao:contao_install_open_sauce_00.png |Layout -> Themes -> Themes Import}}]
renders the HTML:- <div class="thumb2 tcenter" style="width:100%"><div class="thumbinner"><img exify_intitialized="true" src="/business/lib/exe/fetch.php?media=software:contao:contao_install_open_sauce_00.png" class="mediabox2" alt=""><div class="thumbcaption"><strong>Layout </strong>→<strong> Themes </strong>→<strong> Themes Import</strong></div></div></div>
and creates an boxed image with a caption (Wikipedia style) and an empty alt tag.
So you can not populate an alt field using the Imagebox plugin, but you can populate an alt field using the [built-in image tag] [3]. The alt tag generated by the built-in image tag is populated by the value you give to the (tooltip) "caption".
e.g. {{ wiki:dokuwiki-128.png |This is the caption}} (see :wiki:syntax#media_files)
renders the HTML <img exify_intitialized="true" src="/_media/wiki:dokuwiki-128.png" class="mediacenter" title="This is the caption" alt="This is the caption">
If you want to use both a title tag (tooltip) and a different alt tag you need to enable HTML in your DokuWiki and add the image using HTML.
What you did should already succeed in providing the image with an alt text (not with a caption!), except that you don't need the external square brakets:
{{ :image-link.png?200|This is the alt-text.}}
If you want a caption instead, you should look at some plugin such as the box plugin.
Finally, if you wanted a link consisting in an image with an alt-text, just use something like
[[www.theaddress.it|{{ :image-link.png?200|This is the alt-text.}}]]
I'm using asp.net MVC3 and i want to show a table containing information about a course
In that i have a field called "Information" which show an image.
I want to show the a tooltip when the mouse is taken on that image
I'm showing image lik this:
<img id="ok" src="../../Images/info.jpg" alt="tooltip"/>
I dont want to use any added plugin
can anybody help me with this?
Use title as well as alt in the Html tag
<img id="ok" src="../../Images/info.jpg" title="This is your tooltip message"/>
alt attributes on img elements are used as alternate text in case the image does not exist. Some browsers display these as tool tips when hovering over the image, but its not standard.
You could use the title attribute to display a tool tip on hover of the image.
You should always provide an alt attribute when using images, this is best for accessibility (screen readers read the alt text), and will fail XHTML if you don't have the attribute.
What is the best tag to use to display widgets such as links to weather sites and Google maps? My old website used <span> with src= very satisfactorily, but src= isn't available for <span> in XHTML1.1. I've tried <img> and <iframe>. <img> only displays a red cross. <iframe> displays the widget OK but there is a difference between IE and Chrome, which both display it as I want, and Firefox, which puts a visible border round the widget, which I don't want. By the way, I would prefer a non Jquery/Ajax solution.
Using frameborder=0 fixes the problem.