HTML/CSS: Show full size image on click -
i have text + image side side, , want function user can click on image make bigger. i'm new html/css wondering how can approach this. thanks! (demo -> https://jsfiddle.net/dtchh/6634/)
is there way pure html/css , no javascript?
the ones found have been telling me use javascript such as:
<script type="text/javascript"> function showimage(imgname) { document.getelementbyid('largeimg').src = imgname; showlargeimagepanel(); unselectall(); } function showlargeimagepanel() { document.getelementbyid('largeimgpanel').style.visibility = 'visible'; } function unselectall() { if(document.selection) document.selection.empty(); if(window.getselection) window.getselection().removeallranges(); } function hideme(obj) { obj.style.visibility = 'hidden'; } </script>
is there simpler way in html/css?
you use css pseudo-class change styling when, example, mouse on image:
img:hover { width: 300px; height: 300px; }
generally, though, add interactivity web pages, have become acquainted javascript. don't know of way toggle state (e.g. "zoomed-in") without use of javascript.
you can think of html defining content, css defining how looks, , javascript defining how behaves.
Comments
Post a Comment