I'm working on a web application and I'm using the img tag (<img...>).
When the src property is empty, it shows the red x figure indicating that there is no image.
Is there any way to hide that red X icon?
An <img /> tag without an src attribute is invalid HTML. If you do not want to display an image, do not output the <img />tag at all.
If you must output the image tag, thus breaking your html (I wouldn't encourage this), you can hide the [X] in most browsers with one of the following css styles:
<img style="visibility: hidden"/> which hides the image, but still has it taking up space in the page
<img style="display: none"/> which removes the image from the page, making it take up no layout space
The other alternative is to actually link to an image that won't be seen. The classic example of this is to use a 1 pixel transparent gif image. The image won't be visible, although it will effect the page layout.
There's no need adding img tags if you set src to empty string.
If you don't want to print the image, but show it on the screen you can use CSS media types:
<style>
#media print
{
img.noprint {visibility: hidden}
}
</style>
and then add a class to all the images you do not want printed
<img class="noprint" .../>
Related
Let's say we have requirement that icon image element need to present in HTML because we need to indicate icon existence for some screen readers and it's better to have them like IMG tag than I or plain DIV.
We have sprite.png and empty.png images. empty.png used for creating fake blank image (sprite image will be shown because it's background of our element).
In css we have class
.icon {
background:url('sprite.png') 0px 0px;
width:20px;
height:20px;
}
Then we use this in our HTML like this:
<img src="empty.png" class="icon" alt="Image from Sprite is Shown" />
Can we do it any other way, using our 'sprite.png' as image source with setting any mask/clip property on img with css?
Thanks in advance.
background-image does not take the 0px parameters you have after it. You may be mixing it up with background.
To show the correct portion of the sprite image, you use background-position to select the correct portion of the image.
Here is a simple tutorial page: http://www.tutorialrepublic.com/css-tutorial/css-sprites.php
I'm create a custom wysiwyg editor, with custom variables which are filled in from PHP after the content is saved.
For example {image} is a placeholder, which will be filled from PHP after the content saved.
In this case my content template in the HTML code looks like this
<img src="{image}" />
As this is some kind of drag and drop system, I should be able to drag this item on the wysiwyg canvas, but as that {image} placeholder can't be filled with javascript, the browser won't be able to load any image. As I know in this some old Internet explorer versions give some default "image broken" image into those img's, but modern browsers simply doesn't display it.
So is there any way to make those unloaded images visible(by giving some width and height value and some magic)?
I would like to make this with simple CSS rules without using javascript.
One solution what I have found is to give alt attribute to the images and then that text gives with and height for that element.
You should use onerror.. so the image will fail to load, but you can then display a 'holding image' to show the end-user that it will be replaced with their real image when published..
<img src="{image}" onerror="this.src='http://www.mnit.ac.in/new/PortalProfile/images/faculty/noimage.jpg';" width="100" height="100" />
Change the URL to yours.. so something like
<img src="{image}" onerror="this.src='/images/temp_image.jpg';" width="100" height="100 />
Example: http://jsfiddle.net/7FtfX/
Setting the width and height attributes directly on the img element to some modest placeholder size is probably the way to go. You can also do it CSS, i.e:
.wsyiwyg img {
width: 100px;
height: 100px;
background-color: #787878;
margin: 5px;
}
Another idea which might be better is to use JS to check on all img elements and parse the src attribute, then replace any with the {image} format with a placeholder image src (but save the original data and switch it back on save/submit).
Use width, height properties and background. Look at sample
I use this wonderful tool, tinyMCE, for editing pages at my website.
But i have a problem with the resizing of images.
Is it possible to change the way tinyMCE changes the size of the image?
Now the software changes the width and height inside the ..
<img src="..." width="..." height="..." />
But this setting gets overridden by the CSS.
(I have some general img settings in the CSS, width, height:auto, and centering on page.)
If the users define a size for the image, i want this new size to override the general css.
But with the img parameter width & height. this is notpossible. CSS override their value.
So.
I want tinyMCE to change the size of the image by CSS. Is this possible?
ex:
<img src="..." style="width:...;height...;" />
(The size is set by draging the corner of an image to the size you want.. and not edited in html html code.)
Thanks for reading.
Matte
I bypassed this by adding a plugin in the project that handles the re-size event.
Just going to post it here in case someone ever needs it.
tinymce.PluginManager.add('imageresizing', function(editor, url) {
editor.on('ObjectResizeStart', function(e) {
if (e.target.nodeName == 'IMG') {
var selectedImage = tinymce.activeEditor.selection.getNode();
tinymce.activeEditor.dom.setStyle(selectedImage,'width', e.width);
tinymce.activeEditor.dom.setStyle(selectedImage,'height', e.height);
selectedImage.removeAttribute('width');
selectedImage.removeAttribute('height');
}
});
});
Of course you need to add the plugin to tinyMCE which is beyond the scope of this question, but it's not hard at all.
To solve the problem of getting the default image insert size to fit the container, i used
content_style: 'img {max-width: 100%;}'
Inside the tinymce.init({
It doesn't appear to be currently possible to easily change the way TinyMCE adds width and height tags to the img element. There is a feature request open to add this functionality Stop Prepopulating Image Dimensions.
$("#ctl00_ContentPlaceHolder_RichTextBox_ifr").contents().find("body").find("img").attr("height", "150");
$("#ctl00_ContentPlaceHolder_RichTextBox_ifr").contents().find("body").find("img").attr("width", "200");
Here "#ctl00_ContentPlaceHolder_RichTextBox_ifr" is id of textarea..
With this you can resize the image .. .. ..Sarath#f1
I'd like to add a hyperlink to this background image. Should I create a new class within the stylesheet? (When I attempted to call the new class, the image disappeared).
body{
background-image:url('http://thehypebr.com/wp-content/uploads/2010/09/boundless-sem-branco-2.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
line-height:20px; font-size:14px;
font-family:"Trebuchet MS";
margin:0
}
EDIT: Now there's whitespace on the top and bottom (created by the new div class?)
You're using a background-image on the body tag. Assigning a hyperlink to it is impossible.
Also, whats stopping you from using it in an img tag? This seems like a semantically valid thing to do:
<img src="http://thehypebr.com/wp-content/uploads/2010/09/boundless-sem-branco-2.jpg" alt="Image" />
But, if you must use it as a background image, than creating an additional class is the way to go.
You can place a div behind everything on the page, give it a background image, and then add an onclick handler to that div. But you can't hyperlink a background image.
You'd have to do something like:
<body>
<div id='background' onclick='window.location.href="mynewurl"'>
<!-- Rest of page goes here -->
</div>
</body>
Also, add cursor: pointer to the css for the background div so people know it's a link.
OK, I can't tell you if this would be a valid solution, because I would have to see what you actually wanted to be a link. If for example you wanted to make a link to the cream "Boundless" boxes in your background image I do have a work around. It will be a pain to get it correct cross browser, but it's doable.
Make clear gif's the same size as your cream boxes
Put those images in something like this <img src="blank.gif" alt="Link Location" />
Use CSS to make the a tag a block element and place it over the cream boxes in the background image
I would of course clean up my code, it's a mess, but I am sure you can figure that out. Just make sure to have descriptive alt tags for accessibility.
This isn't the best solution, that would be to take the "boundless" boxes out of the background image and place them instead of the blank gifs, but if you HAVE to do it for one reason or another, this option will work.
You're going to have to change your html code a bit to do that. You need to surround the image with a tag, but you can't do that to the <body> tag, obviously.
** EDIT ** Since it's been pointed out my first answer is invalid HTML (thanks, and sorry), you can use a jquery approach like this:
$(document).ready(function(){
$("body").click(function(){
window.location='http://www.yoururl.com';
});
});
The issue with setting up an onClick method, is that you remove the anchor hint at the bottom left of the browser window, as well as any SEO that might be associated with the link.
You can accomplish this with just HTML/CSS:
<style>
.background-div {
background-image:url("/path/to/image.jpg");
position:relative;
}
.href:after {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
content:"";
}
</style>
<body>
<div class="background-div">
</div>
</body>
In this case, the relative positioning on background-div will keep the link contained to only that div, and by adding a pseudo element to the link, you have the freedom to still add text to the link (if necessary), while expanding the click radius to the entire background div.
I have control in a page that gets html from text file and renders that html in webpage.
Right now it has to add image somewhere and reference that image src.
I was wondering if we can render image along with other html code, is it possible?
Yes, it is. You need a Data URI scheme:
<img src="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGP
C/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IA
AAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1J
REFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jq
ch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0
vr4MkhoXe0rZigAAAABJRU5ErkJggg==" alt="Red dot" />
The same can be done in CSS:
ul.checklist > li.complete { margin-left: 20px; background:
url('data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAA
ABlBMVEUAAAD///+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/5
8ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/A
FGGFyjOXZtQAAAAAElFTkSuQmCC') top left no-repeat; }
You can use inline SVG. See this article for mozilla and this one for IE.
You can also create images using CSS and different size characters and playing with z-indexes. Here's CSS Homer.
I've seen it done by creating a table with one cell for each pixel, setting the cell's background color to the pixel's color.