diedVIPs

html knowhow

Mit Button Iframegröße verändern











Mit Button Iframegröße verändern

So sieht´s aus





Quellcode
<html>
<head>

<style type="text/css">
.text {display: inline-block; position: relative; padding: 5px; border-radius: 3px; font-size: 1em;}
.text:hover { font-weight:bold;}
.text:hover .iframe-preview {opacity: 1; }
.iframe-preview {zoom: 0.8; -moz-transform: scale(0.8); -moz-transform-origin: 0 0; transition: 0.2s ease-in-out opacity, 0.2s ease-in-out transform;
opacity: 0; position: absolute; bottom: 110%; left: 50%; background-color:#EEEEEA; border:0px; overflow-x: hidden; overflow-y: auto;
transform-origin: center bottom; transform: translateX(-50%) translateY(420px);}
.iframe-preview iframe {transform: scale(1); transform-origin: 0 0;}
.button {width: 200px; border: 0px; background: red; padding: 10px 20px; -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px;
color: #ffffff; font-size: 12px; vertical-align: middle;}
.button:hover span {display:none}
.button:hover:before {content:"Seite aufrufen";}
.button:hover {background-color: green;}
</style>
</head>

<body >
<span class="text"><a href="../Begriffserklaerung.html" target="_self" ><button class="button">
<span>Vorschaufenster öffnen</span></button></a>
<div class="iframe-preview"><iframe src="../Begriffserklaerung.html" frameborder="10px" width="1000px; "height="350px" style="font-size:0.2em"scrolling="yes"
marginheight="0" marginwidth="0" name="dddsd" target="_self" ></iframe></div></a></div>
</div></span>
</body>

</html>







Kontakt  Datenschutz    Impressum