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.}}]]
Related
<a href="#" role="button" >
<span aria-hidden="true"> First</span>
<img src="D:/kk.JPG" alt="First name" width="20px" height="20px"/>
</a>
JAWS reads it as First First name button instead of First name button.
Is this a Firefox issue? How do I resolve this without using aria-label for the outer anchor tag.
The problem, here, is that JAWS does not consider this element itself, but it is used in the calculation of the text alternative for the link.
To solve this, you can try to remove the redundant text from the img alternative name.
I would make a guess on the pertinence of the image alt here as it is inside a link with other text, so you don't have to describe the image but the purpose of the link.
Of course, if you hadn't said so, I would have suggested to use aria-label.
See the following page: webaim.org/blog/alt-text-and-linked-images
In the above example, because text within the link provides the content of the image and the function of the link, the image itself can be given an empty alt value. An image within a link is something very specific: you don't have to consider the image alternative but the link alternative.
According to WCAG, when an image is the only element inside a link, it should describe the purpose of the link. When you use aria-hidden=true on the only other element, you fall in this situation. As a consequence: the alt for this image should describe the purpose of the link and you have to forget about the description of the image. That's being said, as this does not work in Jaws/Firefox, if you can remove the redundant part, it's the best option
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">
I'm having a little inline editor which uses a contenteditable div. If you have something like this: http://jsfiddle.net/6psJ4/1/ is it possible to make the image not deletable?
<div contenteditable="true">hi<img src="http://tinyw.in/BH9V" contenteditable="false"></div>
Worked for me on Firefox and Chrome, but it's not very usable - e.g. moving caret after the image wasn't possible without ecitable content after it.
AFAIK without custom delete key handler and bogus brs/spaces corrections it won't be possible to implement this as well as e.g. CKEDITOR.
Check this: http://nightly.ckeditor.com/7529/_samples/placeholder.html
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.
I want a sidebar on article page, with additional info. Is there such a solution for Joomla 1.5.
I mean that I add an article and the info is pulled from my text between the tags e.g.
{info_for-sidebar}
Lorem ipsum....
{/info_for-sidebar}
And this info shows in sidebar for current article with actual info.
Is this possible?
Setting up something like what you are asking for require some sort of workarounds.
First, lets agree that what you are calling a "sidebar" is nothing but a content... You enter that content as a part of your article.
So, to achieve what you are asking for I would recommend you use what is called CCK - Content Construction Kit - extension for Joomla using Form2Content. There's a free light edition that would be enough.
Form2Content let you setup a content type. You define what fields you want for each content. Then you create a template that will use the info you are going to enter on the fields to built an article layout.
So let's say you are going to create 3 fields like this :
1- Intro text
2- Full text
3- Sidebar
You are going to create a template as we said. each content type will have 2 templates an intro text template and a full text template
The full text template shall be like this :
<div class="content-container">
<div class="content-sidebar">{$SIDEBAR}</div>
<div class="content-fulltext">{$FULLTEXT}</div>
<br clear="both" />
</div>
The {$SIDEBAR} and {$FULLTEXT} are the text you entered in the form and Form2Content will use it to create a regular content with layout.
If you don't want to use another extension or that solution looks too complicated, you could use a javascript solution. For example you could create an HTML module in Joomla and assign its to the sidebar. On this module switch the view to HTML code and enter this:
<div class="content-sidebar"></div>
When you enter an article, switch the view to HTML code and enter the text you want to show on the sidebar and add a class to the paragraph or the div like this :
<p class="special-content">Lorem ipsum dolor<p>
Then use jQuery to append this special text to the sidebar like this :
jQuery(".content-sidebar").append(".special-content");
Note: Joomla does not load jQuery by default, you have to add it on your template or use a plugin.