Non-interactive iframe or similar solution

Question

I do websites. My clients log in and they see 5 ideas of their site design - different layout, colors etc.

Now I show them just 5 printscreens, done by me and uploaded by me. Each img links to different under-construction website.

What I want is to eliminate the need to change printscreens manually every time I change something.

I tried iFrame solution, but they are interactive.

Do you have any ideas what's the best approach?

EDIT:

I have (workaround) solution, but only for Chrome.

<a target="_parent" href="http://url.com">
<div>
<iframe id="iframe" src="http://url.com" width="300px" height="300"></iframe>
</div>
</a>

and some CSS to zoom out and make website look like thumbnail:

#iframe{
zoom: 4.0;
-moz-transform: scale(0.25);
-moz-transform-origin: 0 0;
-o-transform: scale(0.25);
-o-transform-origin: 0 0;
-webkit-transform: scale(0.25);
-webkit-transform-origin: 0 0;
}

Chrome = size is perfect, when you click on link inside iframe browser opens my href (so much logic...), when you click inside iframe but not on a link nothing happens.

FF = thumbnail 4 times smaller than on Chrome

IE = thumbnail 4 times larger

list all 5 images on the site at once? – Rob W Jul 03 '13 at 21:25 — Rob W, Jul 03 '13 at 21:25

isset · Answer 1 · 2013-07-03T21:54:03.723

You could insert a div-container, which covers the whole page, so your Users can't click anything, but on the div.

<div style="position:fixed;width:100%;height:100%;"></div>

Full code might look like this:

<html>
    <body>
        <div style="position:fixed;width:100%;height:100%;"></div>
        <iframe src="http://www.http://stackoverflow.com" width="100%" height="300" ></iframe>
   </body>
</html>

EDIT: You can try to do this:

    <div id="myiframes">
        <div style="position: relative; width: 300px; height: 300px; display: inline-block;"></div>
        <iframe src="http://www.w3schools.com" width="300px" height="300" style="margin-left:-300px;"></iframe>
        <div style="position: relative; width: 300px; height: 300px;display:inline-block;"></div>
        <iframe src="http://www.w3schools.com" width="300px" height="300" style="margin-left:-300px;"></iframe>
</div>

Basically move each iframe beyond the div, by adding a margin of -300px; to each iframe. Change to your needs

Problem is I want rest of the page interactive. I've tried to cover only iframe with div, but with no luck. — pp_1, Jul 03 '13 at 21:35
Doesn't work. iframe is more important for some reason. Div onclick = some JS doesn't work either. — pp_1, Jul 03 '13 at 23:03

Non-interactive iframe or similar solution

1 Answers1