Hjælp til kode (tryk på tekst og billede pop-up)

Her kan du få hjælp og stille spørgsmål til JavaScript!
Besvar
Kk_afk
Begynder
Indlæg:1
Tilmeldt:30. nov 2016, 22:35
Hjælp til kode (tryk på tekst og billede pop-up)

Indlæg af Kk_afk » 1. dec 2016, 10:30

Hej. Håber nogen kan hjælpe. Nu har jeg efterhånden sat og bakset med denne kode i alt for lang tid.
Jeg skal have lavet det sådan på min side at jeg kan trykke på tekst og så kommer et billede op.
Har rodet med følgende kode:

Kode: Vælg alt

<!DOCTYPE html>
<html>
<head>
<style>
#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>

<div id="myImg" src="bob.jpg" alt="Trolltunga, Norway" width="300" height="200">  Hej  </div>

<!-- 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>

</body>
</html>
<

koden er fra denne sidehttp://www.w3schools.com/howto/howto_cs ... images.asp og skulle meget gerne virke på samme måde, bare hvor det er tekst man klikker på og billede kommer op.

cristian
Moderator
Moderator
Indlæg:882
Tilmeldt:26. sep 2011, 21:31
Kontakt:

Re: Hjælp til kode (tryk på tekst og billede pop-up)

Indlæg af cristian » 5. dec 2016, 10:06

Prøv at lave en grafisk repræsentation af hvad du gerne vil lave, sådan så vi / jeg ikke skal gætte hvad vi tror du gerne vil lave.

Lav dette i paint, word / andet.

jepperask
Geni
Geni
Indlæg:378
Tilmeldt:4. nov 2012, 17:57

Re: Hjælp til kode (tryk på tekst og billede pop-up)

Indlæg af jepperask » 5. dec 2016, 11:30

Prøv nedenstående - husk og ret image-source til.

Kode: Vælg alt

<!DOCTYPE html>
<html>
<head>
<style>
#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>

<div id="myImg">
<p>Hej</p>
<img src="bob.png" alt="Trolltunga, Norway" width="0" height="0">
</div>


<!-- 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.getElementsByTagName('img')[0].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>

</body>
</html>

cristian
Moderator
Moderator
Indlæg:882
Tilmeldt:26. sep 2011, 21:31
Kontakt:

Re: Hjælp til kode (tryk på tekst og billede pop-up)

Indlæg af cristian » 8. dec 2016, 17:03

Er det sådan noget her vi er lidt ude i, eller skal det mere være et "fancy" element der åbner i hvad der ligner et nyt vindue med en sløret baggrund?

Kode: Vælg alt

<html>

<head>

	<style>
		a:hover {
			position: relative;
		}
		
		a:hover:after {
			content: url(http://9buz.com/content/uploads/images/November2014/Kitler_the_cat_9buz.jpg); /* no need for qoutes */
			display: block;
			position: absolute;
			left: 123px; /* change this value to one that suits you */
			top: 56px; /* change this value to one that suits you */
		}
	</style>

</head>

<body>
	<p>Kitler</p>
	<a href="#">test image</a>
</body>

</html>

Besvar