+ 1
enlarging image and dimming background with "onclick" attribute? Cant figure out how to add dim background after image enlarges.
<!--This code enables picture to zoom/grow , but I also need the box shadow around the img to grow--> <!DOCTYPE html> <html> <head> <title>Pet-Groom Home</title> <link rel="stylesheet" href="PetHome1.css"> </head> <body> <img onClick="showG()" id="bath" src="groomer.jpg"/> </body> <script> var img = true; function showG(){ if(img == true){ document.getElementById("bath").style.width ="800px"; } else{ document.getElementById("bath").style.width ="300px"; } if(img == true){ img = false; } else{ img = true; } } </script> </body> </html> ......................................CSS.................................................... #bath { width:300px; position:absolute; top:390px; left:45px; box-shadow:10px 5px 40px 5px black; -webkit-transition:all 0.6s ease; z-index:100; }
13 Réponses
+ 4
what do you mean by dimming exactly?
+ 4
Do you want to enlarge an image and eclipse it?
+ 4
Ok mate, at first let's realise if objects around the picture can be accessible when it's enlarged. If so you can definitely use a shadow.
On the other hand it is not a proper way. To do it well we need to know how the picture is going to be placed at the document tree. You can use a cover which is by enlarging the image showed up and changes its z-index smaller than image but bigger than everything else. This is a good way
+ 4
Check my profile. There is a code for you.
+ 3
Do you know how to do it now?
+ 3
I am sorry, some language barrier mistake. I mean smaller 😁
+ 1
Thank you, patrik sokol. Ill go take a look.
0
So when you click on the image, its gets larger and the background(everything behind image) gets darker. I am trying to make it so that when you click on image it focuses on the image as it gets bigger.
0
I am not sure exactly what you mean by eclipse. I want the image to remain bright though, maybe its possible to grow the box shadow around the image so that it covers most of the background behind image. I also want this to be a toggled function, so that when you click on the image again it goes back to its default size and the background eases out of the "dim"/"darker" state it was in.
0
Things i have tried adding. These additions darken the background, but only after the second click and then it doesn't toggle off with additional clicks.
.............HTML...............
<!-- i added a div to html and set the id to "dimmer". and gave the onclick attribute and extra value named "dim_div()"
<img onClick="showG();dim_div()" id="bath" src="groomer.jpg"/>
<div id="dimmer"></div>
.................CSS...................
/*i added some properties to make the div cover the background in a dark transparent layer*/
#dimmer
{
background:#000;
opacity:0.5;
position:fixed; /* important to use fixed, not absolute */
top:0;
left:0;
width:100%;
height:100%;
display:none;
}
...................JAVASCRIPT....................
//I then added a function named "dim_div()" and placed it below the rest of javascript code.
function dim_div() {
if(img == true){
document.getElementById("dimmer").style.display="block";
}
}
0
Well, i think i would like to NOT allow objects to be accessible during the enlargement of the image. so adding that cover sounds like the way to go, which is what i semi-accomplished with the additions i added to the code, however is doesn't really work the way i think your talking about.
Not sure exactly what you mean by "enlarging the image showed up and changes its z-index slower than image but bigger than everything else." Do you mean like increasing the z-index for the image?"
sorry, i am much more of a visual learner, maybe an example would help.
0
Lol no worries. So I am not quite sure how to implement what you are talking about. I think I have accomplished it somewhat, but I need the ability to toggle the dim "cover" off or push it away when image is at default size. Most of my confusion is within my javascript code. How to enlarge image at exact same time that the dim "cover" is placed and how to take that dim cover away when the image is small. how to make two things happen at the exact same time with the "onclick" is what has me confused.
0
Thanks again Patrik, i have gotten it to work with my code pretty well, had to change a few things, but for the most part it works great. The only trouble i run into now is trying to give the "cover" a transition instead of it blinking on and off without a smooth transition. Ultimately you have done a awesome job though. It is much appreciated!
Vous avez souvent des questions comme celle-ci ?
Apprenez de manière plus efficace, gratuitement :
Aujourd'hui en vedette
Help please?
4 Votes
Ejercicio Pytho
0 Votes
Online voting system
2 Votes
What is that z for
0 Votes
Suggestions needed
4 Votes
Game development
0 Votes