CODEWITHSUNDEEP
javascripthtmlcss
Dillyo09
Dillyo09

Reputation: 113

Html/CSS make a live picture of a website

I was looking to making a link on a website a live changing picture of wherever the link is taking it to.

For example: I have a link to Page A, so the picture will show the page A. If I want to change the color of Page A, I would not have to change any code on the link picture but just the code for the color on the page and the picture will so the color change.

Upvotes: 9

Views: 3389

Answers (4)

Color
Color

Reputation: 262

There are free tools which do this,

you won't need to change the image, but they use cache and you may need to refresh the request to update image

  1. http://mozshot.nemui.org/
  2. http://www.websnapr.com/

they are very simple to use, as this link shows a very small shot of google and you can use at in a html img tag: http://mozshot.nemui.org/shot/small?http://www.google.com/

My suggestion:

The first one (mozshot) is open source, so you could simply download and edit it, put it on your own website to update the image frequently or even after each refresh (which would be live but takes a lot of resource)

here is the source code for mozshot: http://github.com/sugi/mozshot

Hope this helps

Upvotes: 1

Ryan McDonough
Ryan McDonough

Reputation: 10012

You could use a commercial service like Shrink The Web who will provide an API for this feature. It's a lot more intensive than just a bit of CSS/HTML..

Upvotes: 4

Ravi Gadag
Ravi Gadag

Reputation: 15881

if i understood your question correctly, these are the possibilities for your problem.

  1. Use Iframes, so that you can change the source of iframe with your changes and it will be reflected in every where it is used.
  2. If you are using Jquery, knockout or any template engine, then you can create a template. so that you can change it and reuse it.

Upvotes: 2

Tom Pietrosanti
Tom Pietrosanti

Reputation: 4294

You could just use a small iframe. I would layer a link over the top of it to prevent any interactions with that page itself. Otherwise, scraping a screenshot will require more than just HTML and CSS.

Upvotes: 2

Related Questions