I'm not sure if this is even possible.
I have an image within a div.
<div id="image">
<img src="mine.jpg" />
</div>
And I have another div with text, that is placed on top of the image (well, more precisely, on the div that contains an image).
<div id="image">
<img src="mine.jpg" />
<div id="watermark">Hello</div>
</div>
Now, is it possible to save this as an image? (hm, it sounds a bit ridiculous even while I'm typing this question out!).
It sounds more like "how do I take a screenshot of user's browser".
Even if above is impossible, is there even a remotely relevant approach to this?
No, such a thing is not possible. The best way to do this is to compose the image using serverside code. Like PHP.
I think with html5 you can make such thins with the canvas but thats far away from a everyday use, at the moment.
Related
Since I upgraded from Pandoc v1.19 to 2.9, decorative images are not exported as expected anymore.
First of all, when generating HTML from , in v1.19 a <p class="figure"> structure was wrapped around the image, but now it's only a <p>:
<p>
<img src="test.jpg">
</p>
This makes it harder to style in line with other images that have an alternative text.
But what's really a problem here: there's no alt="" attribute produced anymore! This means that e.g. screen readers will not recognise this as a decorative image anymore.
So let's see what happens to an image with an actual alternative text, e.g. when generating HTML from :
<div class="figure">
<img src="test.jpg" alt="">
<p class="caption">Hello</p>
</div>
Here we get a class="figure" in the surrounding element, but now it's a <div> instead of a <p> (I don't bother too much about this, but again, it makes it harder to style everything the same).
What again is a big problem though is the fact that the alt attribute is now set empty: this prevents screen readers from perceiving them at all, which is horribly wrong! I guess that Pandoc concludes that having alternative text and caption would be redundant, which is correct, and that the caption below would be the right thing to show - which it is not.
The right structure would look something like this:
<div class="figure">
<img src="test.jpg" alt="Hello"><!-- Leave the alternative text on the image -->
<p class="caption" aria-hidden="true">Hello</p><!-- Hide the redundant visual alternative text from screen readers -->
</div>
Any reason why this behaviour would make sense? Can it be changed somehow? Otherwise I will have to fiddle around with some post-processing JavaScript...
The  example is no longer treated as a figure, because pandoc now requires that
the image is the only element in a paragraph, and
it has a caption.
Wrapping of figures with <div> happens when exporting to HTML4. Using the latest pandoc 2.9.2.1 and running pandoc -t html5 on the input 
<figure>
<img src="test.jpg" alt="" /><figcaption>Hello</figcaption>
</figure>
The rationale for emitting an empty alt attribute is that screen readers would read the caption twice: first the alt, then the figcaption. Your suggestion seems much better, please open an issue.
If you can't wait for a new release, then use a Lua filter to create figures the way you like:
function Para (p)
if #p.content == 1 and p.content[1].t == "Image" then
local image = p.content[1]
local figure_content = pandoc.List{}
figure_content:insert(image)
figure_content:insert(
pandoc.RawInline('html', '\n<p class=caption aria-hidden="true">'))
figure_content:extend(image.caption)
figure_content:insert(pandoc.RawInline('html', '</p>'))
local attr = pandoc.Attr("", {"figure"})
return pandoc.Div({pandoc.Plain(figure_content)}, attr)
end
end
I would like to put an image on another image like it is done in Facebook, Google+ and now Twitter.
Large back image with a smaller one on the left side dropping off the large one, if that makes sence
There's several ways you can do this, 1 of them is using position (so you're on the right track).
Place 2 images inside an element that has position:relative and place the top image position:absolute, like so:
<div style="position:relative">
<img alt="" src="foreground.jpg" />
<img alt="" style="position:absolute; left:40px; top:20px" src="background.jpg" />
</div>
Check out this DEMO
Another way would be to have the background image set as a background on the <div> and place the image you want on top directly inside that div. Check out this 2nd DEMO
I have 3 divs parallel to each other holding some information. I want three new divs, in the same position as the previous ones (refer image), take the position of the last ones while pushing the same downwards.
I want this action to happen dynamically i.e. when someone enters information on the back-end module, the more recent information takes place of the older one.
I am pretty new to Ajax and jQuery but I am sure this is the way to go. Can someone please direct me to a suitable direction?
Image: http://img12.imageshack.us/img12/4149/us56.jpg
You are right, Ajax and jQuery can be the way to go.
Simplest solution is probably to put the three blocks into one div and call
$("#parent-div").prepend();
on it. You can arrange the blocks how you want using CSS
<div id='parent-div'>
<div class="col left">Hello World</div>
<div class="col">Hello World</div>
<div class="col">Hello World</div>
</div>
Tried it out on jsFiddle, just have a look.
http://api.jquery.com/insertBefore/
example:
$('<div>new div</div>').insertBefore('#divName');
I've been working on a website locally, creating the web page using Dreamweaver and the latest version of Bootstrap (v 2.3.2). I've been testing it in different browsers and the images seem to load correctly in all of the other browsers (Chrome, Firefox, and Safari). When I go into Internet Explorer 8, some of the PNG files I created load correctly while others don't load at all.
Here is how it looks in Chrome:
Here is how it looks in IE8:
I read through many solutions. The first here, where I went into the Developer tool and did an image report. In the report, as seen below, shows it can read the ALT tags but can't seem to read or think the image link is broken:
Knowing this, I tried finding a more in-dept solution, including this post. Thinking it could possibly be the way the picture was created, I tried multiple ways of creating the images (including changing the format of the file to RGB 8-bit in Photoshop and copying/pasting the vector images from Illustrator to Photoshop) and then removing the browser cache every time I would modify the images and restart the browser. None of it seems to work!
I was wondering if there was something else I could possibly try?
The code I'm currently inserting these images are through the HTML:
<div class="span4">
<div id="applicationInfo">
<p>Application #:<br />
PI: <br />
Status: <br />
Disposition:
</p>
</div>
<ul>
<li>PI / CoPI Information<img src="images/incomplete.png" /></li>
<li>Project Information</li>
<li>Funding Information</li>
<li>Proposal Summary<img src="images/complete.png" /></li>
<li>Proposal Narrative</li>
<li class="current">Current Research Summary<img src="images/complete.png" /></li>
<li>Budget</li>
<li>Publications List</li>
<li>Supplemental Information</li>
<li>Save <span class="small">(without submitting)</span></li>
<li>Submit</li>
</ul>
</div>
This post helped a lot! What helped was making sure to have the images saved as RGB 8-bit or 16-bit. I usually have it defaulted at 16-bit to give more color.
Best of luck to anyone looking for this answer!
I want the header and the main image on a page to stay connected to each other so that when the picture resizes it doesn't become too far off from the header.
But whenever I try to look up the answer, the word "fix" throws off the whole search.
Basically I have two images with divs as containers but I don't know the key words to make them stay/move together.
Try simply wrapping them inside an extra div:
<div id="Wrapper">
<div id="Header">Header Text Here </div>
<div id="Image"><!--- Image Tag here ---> </div>
</div>