I made attempt and tried to find my goal But I couldn't and found solution like this that didn't benefit for me!
I have <img src="url" title="ali.com"> I want to make ali.com a link. I used
title=ALI.com but doesn't work! any way?
The title attribute accepts only plain text, you cannot have any markup there.
If you want a tooltip with a link inside (and I'd urge you not to as it is a difficult UI to use), then you'll need to build the whole thing with JavaScript and DOM.
Above answers suffices your requirement, but specific to your use case :
<img src="image url" title="ali.com"/>
You can use url as a title (google.com?d=1&e=2 this is string)
You need to run little js code to achieve final goal
put something like this html
<a class="mylink"> <img title="blahblah" scr =""></img></a>
and you can get title string by
yourtitlestring = $(".mylink img").attr("title")
and now you can set href of link
$(".mylink").setAttribute("href", yourtitlestring);
Related
I have this src="https://open.spotify.com/embed/track/1Go9q6KaCpAsQ0wkZFGzY2?utm_source=generator" and I want it to be like this src="https://open.spotify.com/embed/track/{{ spotify_trackid }}?utm_source=generator"
how can I do this using django without it breaking the link?
sorry for the bad explanation i'm pretty new to this
You should use href attribute to add links to your text like this:
Your Text
And you can't play with URL of websites
Basically I want something like this, <img src="doesntexist.png alt="Image does <b>Not</b> exist" />.
Edit
Thanks for the info, but I was hoping to accomplish this without JavaScript.
You can't do what you're asking with traditional HTML.
The alt attribute is defined in a set of tags (namely, img, area and optionally for input and applet) to allow you to provide a text equivalent for the object.
http://www.w3.org/QA/Tips/altAttribute
Alt attributes are used to display a text description of an image whenever the image is not available, is not displayed by the browser, or the image cannot be seen by the user. Some users can be blind, color-blind, or low-sighted. The alt attribute is used in such cases to aid users by describing the intent of the image.
You might want to look into something like a tooltip. With tooltips you can customize the style and how they appear to the end user. There are a bunch of them out there. One example is jQuery's Tooltip: http://jqueryui.com/tooltip/#custom-style
Unfortunately no. It can however be replicated to allow markup with Javascript.
function altContent(img) {
var alt = document.createElement('div');
alt.innerHTML = img.getAttribute('alt');
img.parentNode.replaceChild(alt, img);
}
Then just add the attribute onerror to the image, like so.
<img src="doesntexist.png alt="Image does <b>Not</b> exist" onerror="altContent(this)" />
JSFiddle Example
Cleaner Solution
I'm actually needing to include html links in the longdesc attribute. I've altered prettyphoto to use longdesc instead of title for images, but I need to include html links in those descriptions. I know it's possible with code for characters, I just don't remember what those are.
Thanks
This can be done with the longdesc attribute:
<img src="theimage.png" longdesc="thedescription.html" />
And then, in thedescription.html:
Link
One alternative way to do this is by using an OBJECT element, as follows:
<OBJECT data="theimage.png" type="image/png">
Link
</OBJECT>
Also, since you asked for it, here is how to convert html entities automatically in jquery:
$('<div/>').text('Some Link').html();
// the above evaluates to <a href="link.html">Some Link</a>
I'm not sure if this is what you're looking for, but you can use Walter Zorn's wz_tooltip to show a tooltip with any kind of content.
And example of use:
<img src="theimage.png" onmouseover="Tip('<a href=\'http://test.com/\'>Link</a>');" onmouseout="UnTip();">
The longdesc attribute is an URI, not a place to add code. In other words, you'll need to create a page that the longdesc links to. This page is where you'll make a thorough description of what's on the image.
Are you looking for the html entities?
If so, these are what you are looking for:
> = >
< = <
" = "
' = '
Just wondering whether anyone knows how to get blogger labels into "alt" tags in an image. I have tried alt="data:post.labels" to no available at all?
Doesn't anyone know how to assist with this on blogger?
P.S - I know about the ‘rel=tag’ - but for the specific template, I want to have the labels appear as text in the alt tags?
Looks like you may be using the XML version of templating Blogger. If that's the case, then you'll need to use something like the below if you want to have the ALT attribute show up with the name of the tag:
expr:alt='data:label.name'
You can use the same principle to display the label/tag in the TITLE attribute of a link, link so:
<a expr:href='data:label.url' expr:title='data:label.name'><data:label.name/></a>
Can CSS be used to change the title attribute in this img tag to something more pleasant than P10305...? All the images I need to target are in tables (as shown below)
I would like to change all image title attribute in a website to the name of the company. Is it possible?
<td><img border="0" title="THIS THING HERE" src="http://the website I'm working on.jpg" /></td>
Many thanks
Mike
This isn't possible with CSS, as CSS only affects styles. What you're asking for is a content change.
The change you want is possible with Javascript, however. If you happen to be using Prototype, it's pretty easy:
$$('td img').each( function( image ) { image.title = "Company Name" } )
jQuery should make this similarly easy too.
Hope that helps!
That can be slimmed down a bit:
$('td img').attr('title', 'value');
jQuery will select all img inside a td and apply that attribute, no reason to have a .each in there.
not using strict css. However jQuery, and other javascript methods can be used to select that image and change it's title attribute.
$('td img').each(function() { $(this).attr('title', 'value') });
gives you a rough idea of how to use jquery to do this.
Check out the documentation to get a better idea: http://docs.jquery.com/