2020-03-08, 08:25 PM
How can I do that? (I've tried it myself, but I can't do it alone)
1. I go with the mouse on the picture, it creates a hover effect
2. I click on the picture, a window opens
3. I can play a game
_________________________________
What I've tried:
I have a picture in a sidebox.
I have "copie & paste" the modal images content from this page in the sidebox
When I click on the picture, the picture opens in a frameless window and you can see the picture bigger.
Script is ok ...
Of course I now also realize that it is a script for pictures. So I have a wrong script.
Now comes my part, which I can not solve alone and hope for help ...
When I click on this picture I want a window to open and a game to be played instead of the bigger picture ...
The script for this game:
in summary:
I go with the mouse on the picture, it creates a hover effect, I click on the picture, a window opens and I can play the game
Can this be implemented?
I know this thing from old times from the HMTL .. but I would very much like to have the whole thing in css ..
Can someone help me?
THX in advance!
blongso
1. I go with the mouse on the picture, it creates a hover effect
2. I click on the picture, a window opens
3. I can play a game
_________________________________
What I've tried:
I have a picture in a sidebox.
I have "copie & paste" the modal images content from this page in the sidebox
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {opacity: 0.7;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Caption of Modal Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation */
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
</style>
</head>
<body>
<h2>Image Modal</h2>
<p>In this example, we use CSS to create a modal (dialog box) that is hidden by default.</p>
<p>We use JavaScript to trigger the modal and to display the current image inside the modal when it is clicked on. Also note that we use the value from the image's "alt" attribute as an image caption text inside the modal.</p>
<img id="myImg" src="[color=#FF851B]my_image.jpg[/color]" alt="Snow" style="width:100%;max-width:300px">
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
<script>
// Get the modal
var modal = document.getElementById("myModal");
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById("myImg");
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
</script>When I click on the picture, the picture opens in a frameless window and you can see the picture bigger.
Script is ok ...
Of course I now also realize that it is a script for pictures. So I have a wrong script.
Now comes my part, which I can not solve alone and hope for help ...
When I click on this picture I want a window to open and a game to be played instead of the bigger picture ...
The script for this game:
<div>
<script src="https://cdn.htmlgames.com/embed.js?game=ZumaLegend&&bgcolor=white"></script>
</div>in summary:
I go with the mouse on the picture, it creates a hover effect, I click on the picture, a window opens and I can play the game
Can this be implemented?
I know this thing from old times from the HMTL .. but I would very much like to have the whole thing in css ..
Can someone help me?
THX in advance!
blongso