This symbol of a ripped paper is appearing on some of my <a> tags in Firefox Browser..
Here is an example:
Does anyone know what this means?
Thanks!!
update : here's some code:
<a href="#" onClick="jQuery('#youtube-player-container').tubeplayer('play');">
<img class="mp3button" style="background-image:url('/mp3_play.png');background-size:100% 100%;" />
</a>
(the image does appear appears so it's not a problem with the img src)
The ripped paper icon is for a broken image src. You would see it if you requested an image that didn't exists ie:
<img src="notarealimage.jpg"/>
In your case you have no src attribute, which is why the browser sees it as a broken image.
Given that you're using a background image on your img tag, I suggest changing the img tag to a span or div tag, or just adding the style attribute to the a tag and removing the img tag altogether, i.e:
Related
I am creating a crawler which needs to download the logo from every website it crawls.
It is quite hard to detect which image is the logo, however I don't need 100% accuracy, so I am thinking of just looking for <img> tags which fulfil any of the following conditions:
A. The name of the image in the <img> tag has the word "logo" in it, for example:
<img src="logo.gif">
<img src="site-logo.jpg">
<img src="mainlogo.png">
B. The class or id in the <img> tag has the word logo in it, for example:
<img class="logo" src="something.gif">
<img id="main-logo" src="something.gif">
<img class="background logo" src="something.gif">
I've tried following the W3C XPATH documentation, but it is not very user friendly. I've also tried using what are supposed to be wildcards (according to w3schools) but they do not appear to work as expected.
Is it possible to achieve what I want using XPATH? Could you help provide some pointers or example code?
Thank you.
You could use:
/html/body//img[contains(#src, 'logo') or contains(#id, 'logo') or contains(#class, 'logo')]
which will find all img tags that are a descendant of the body tag, where the src, id or class attribute contains the text logo.
I am trying to get my anchors of thumbnails to open to a different page but at the specific element. I don't think it is working as there is a jquery plugin on the page that the elements exist on and I can't find a way to target them. When you click on a image it opens on the first in the sequence but not on the image requested. How can this be solved?
Please see my page here http://i-n-t-e-l-l-i-g-e-n-t-s-i-a.com/melissafranklin.com/index.html
The href attribute of the <a> tag should match the src attribute of the <img> tag
Use this:
<a href="images/paintings/7copy.jpg">
<img src="images/paintings/7copy.jpg" alt="">
</a>
Instead of this:
<a href="paintings.html">
<img src="images/paintings/7copy.jpg" alt="">
</a>
when inserting images using the WYSIWYG in a page in the back-end, the image file extension has %20 appended on to it (which i believe is a space), if you click the hide editor button to view the HTML it will look like this
<img src="{{media url="wysiwyg/example.png"}}%20" alt="" />
Clicking insert image from the html source view inserts the image fine, it's when i'm in the actual wysiwyg editor the problem occurs.
After I've selected my image and inserted it i'm taken back to the popup box with the "Image URL" field in the general tab. It's here that a space is getting added on to the end of the file.
http://example.com/index.php/admin/cms_wysiwyg/directive/___directive/rfe33fSB1cmw9Ind5c2l3eWcvQ3wfwfer43cifX0,/key/rufheufuh4uh42eaf7611b26e2e1x1786/
Above is an example url from the image url field and a space is getting added after the last forward slash resulting in the %20, therefore not displaying my images.
Where can i trim this value as that will probably fix it?
Thanks for any help.
Try to use this:
<img src="{{media url="wysiwyg/example.png" _query="%20"}}" alt="" />
Or maybe:
<img src="{{media url='wysiwyg/example.png'}}%20" alt="" />
I need to add a text on each of the image and I have the image gallery constructed using img tags. Can't I append div tags under img tags. Similar to the one shown here :
<img id="img1" class="img1_1" src="hello1_1">
<div class="textDesc">HELLO1_1</div>
</img>
Though the div is appended to img tag , but I cant see the text "HELLO1_1" on the image.
Please can anyone help me?
If you need the source code I can share it with you.
Here is the link to test the scenario :
http://jsfiddle.net/XUR5K/9/
An image tag can not have child elements. Instead, you need to position the DIV on top of the image using CSS.
Example:
<div style="position: relative;">
<img />
<div style="position: absolute; top: 10px;">Text</div>
</div>
That's but one example. There's plenty of ways to do this.
The img element has a self closing tag, so you can't give it child elements and expect it to work. Its content model is defined as empty. Source.
I suspect any children you specify won't be rendered because an img element is a replaced element, as mentioned in the W3C spec.
Rules of good tone.
Use null source in IMG tag.
Use CSS content:"" for WebKit browsers.
Insert element through JavaScript. Clear in HTML does not affect.
Also you can use pseudo elements.
Example: https://github.com/Alexei03a/canvas-img
Here's an example of my markup:
<li class="tumblr_post tumblr_photo_post">
<img class="tumblr_photo" alt="Testing photo post" src="http://29.media.tumblr.com/tumblr_li5e4zfgrd1qi4tmio1_400.png">
<div class="tumblr_caption">
<p>Testing photo post</p>
</div>
</li>
I'd like to change the size of the image's container without changing the image's size. As it's directly in the flow as an img, how can I do this?
I think your image is not contained into a div container like you are doing with the video on top.
Try to use the following jQuery code to add the img into a div container. You will have to add the jQuery library to your page of course.
$('.tumblr_photo').wrap('<div class="somename" />');