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/
Related
Is it possible in CSS (only) to hide some text of a string?
I know there these attribute-selectores like:
[att^=val] – the “begins with” selector
But for instance, having this:
<div class="some_random_text">
This is a default text
</div>
I want to (display: none) only a certain substring - in thise case "default". I know how to do it with JS, but I'm looking for a CSS-solution only (if there is any).
Even though I guess it isn't possible to manipulate the DOM via CSS, which would be neccessary to have something like:
this is a <span class="hideThis">default</span> text
why would you need this and where does it occur?
For instance in a CMS (in my case OXID). You can add a title to a specific payment-method. Here I have
paypal
paypal (provider1)
paypal (another dude)
I want to have only PayPal visible in the frontend. The other PayPal-Paymenttypes have to remain however. Naming them all PayPal just leads to confusion.
there is the content-property. Is it somehow managable with that?
Again, no JS :-)
To answer your question - no, it's not possible using only CSS.
You can;
Edit the HTML as you suggested
this is a <.span class="hideThis">default<.span > text
Use JS to alter the elements innerHTML value
Use a pre-processing language (like PHP or ASP, whatever you are able to use) to reduce the string to a substring.
Sorry if that's not the answer you wanted, but those are your options.
It it not possible. The only thing that can actually modify the inside text is the content property. Assuming something changes in your dom, you can have rules like:
.some_random_text:after {
content: "This is a text";
}
other_select .some_random_text:after {
content: "This is a default text";
}
But sincerely, I don't get the point, as JS and consors are made for that.
It's not possible, here's the documentation on selectors: https://www.w3.org/TR/css3-selectors/#selectors
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);
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
How can I update the text fields with HTML? I have a page with some textfields, and I need to update these fields at a specific time. I used the value property to display the default values, but how can I change the values later?
Thank you
I am forcing a JavaScript answer, since there is no way it can be done with only HTML.
Snippet:
<input type="text" id="textboxid" />
<script type="text/javascript">
var txtBox = document.getElementById("textboxid");
txtBox.value = "new value";
</script>
You need to use javascript in order to achieve this. I recommend jQuery, as it prevents most cross-browser "quirks" and "gotchas". Specifically, you're looking for http://api.jquery.com/html/ or http://api.jquery.com/val/.
JSFiddle: http://jsfiddle.net/dEUH5/
First of all, at the very least, HTML is used for Mark-Up, CSS is for styling, and JavaScript is for functionality. I suggest that if you want to add functionality and interactivity to your website, you look up how to use JavaScript. This will allow you to add the functionality you wish for your textbox, as you wished.
You can't do this with HTML, you could with PHP.
I'm sure someone will type out the code, but go to: http://uk.php.net/.
This question is way to broad too.
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:
> = >
< = <
" = "
' = '