html - <img style="border:5px solid black"> - Udvikleren.dk

Tags: javascript html

Bruger #21777 @ 22.06.17 10:44

Jeg er lidt ny med javascript

Ved ikke om det er muligt i javascript/html. Jeg har fx. 6 små billeder, når man trykker på et billede, skal border skifte fra 0px til 5px på billedet, og nederst på siden skal der stå : "Du har markeret 1 billede nu"

Har I et par gode links ? Eller hvilken funktion jeg skal bruge :-)

På forhånd tak for hjælpen

4 svar postet i denne tråd vises herunder
0 indlæg har modtaget i alt 0 karma

Sorter efter stemmer Sorter efter dato

Bruger #16075 @ 22.06.17 15:49

1.223

du kunne overvej at bruge jquery (det er en bunke javascript functioner)
så ville det kunne løsses sådan her:

Kode

<!DOCTYPE html>
<html lang="da">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
        <title>demo</title>

        <style type="text/css">
            .selected{
                border:5px solid red;
            }
        </style>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {


                $("img").click(function () {
                    // fjerner classen selected, hvis den allerede er lagt på et af img
                    $(".clickable").each(function () {
                        $(this).removeClass('selected');
                    });


                    // lægger classen på det img der er valgt
                    $(this).addClass('selected');

                    // henter img attributten alt og bruger den til den tekst der udskrives
                    var txt = "du har trykket på img " + $(this).attr('alt');
                    $("#msg").html(txt);
                });


            });

        </script>
    </head>
    <body>
        <img class ="clickable" src="smiley.gif" alt="Smiley face 1" height="42" width="42">
        <img class ="clickable" src="smiley.gif" alt="Smiley face 2" height="42" width="42">
        <img class ="clickable" src="smiley.gif" alt="Smiley face 3" height="42" width="42">
        <img class ="clickable" src="smiley.gif" alt="Smiley face 4" height="42" width="42">
        <img class ="clickable" src="smiley.gif" alt="Smiley face 5" height="42" width="42">
		<img class ="clickable" src="smiley.gif" alt="Smiley face 6" height="42" width="42">
        <div id="msg"></div>

    </body>
</html>

Bruger #21777 @ 23.06.17 09:06

du kunne overvej at bruge jquery (det er en bunke javascript functioner)
så ville det kunne løsses sådan her:

Kode

<!DOCTYPE html>
<html lang="da">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
        <title>demo</title>

        <style type="text/css">
            .selected{
                border:5px solid red;
            }
        </style>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {


                $("img").click(function () {
                    // fjerner classen selected, hvis den allerede er lagt på et af img
                    $(".clickable").each(function () {
                        $(this).removeClass('selected');
                    });


                    // lægger classen på det img der er valgt
                    $(this).addClass('selected');

                    // henter img attributten alt og bruger den til den tekst der udskrives
                    var txt = "du har trykket på img " + $(this).attr('alt');
                    $("#msg").html(txt);
                });


            });

        </script>
    </head>
    <body>
        <img class ="clickable" src="smiley.gif" alt="Smiley face 1" height="42" width="42">
        <img class ="clickable" src="smiley.gif" alt="Smiley face 2" height="42" width="42">
        <img class ="clickable" src="smiley.gif" alt="Smiley face 3" height="42" width="42">
        <img class ="clickable" src="smiley.gif" alt="Smiley face 4" height="42" width="42">
        <img class ="clickable" src="smiley.gif" alt="Smiley face 5" height="42" width="42">
		<img class ="clickable" src="smiley.gif" alt="Smiley face 6" height="42" width="42">
        <div id="msg"></div>

    </body>
</html>

Mange tak for svaret

Kanon forslag med jquery

Måske har jeg har formuleret mig lidt klodset

Undskyld- Det skal være muligt, at markere flere billeder på samme tid, og antallet skal stå i bunden

Bruger #16075 @ 23.06.17 09:46

1.223

prøv med dette javascript.

Kode

<script type="text/javascript">
	$(document).ready(function () {


		$("img").click(function () {
			
			// OK kort form af nedenstående
			// http://api.jquery.com/toggleclass/
			$(this).toggleClass( 'selected' );

			
			/*
			// OK lang form
			if($(this).hasClass('selected')){
				// fjerner classen, hvis den allerede har den
				$(this).removeClass('selected');
			}
			else{
				// lægger classen på det img der er valgt
				$(this).addClass('selected');
			}
			*/
			
			
			
			var txt="";
			var i_alt=0;
			$(".selected").each(function () {
				txt += "du har trykket på img " + $(this).attr('alt')+"<br>";
				i_alt++;
			});
			txt += "i alt " + i_alt + " billed(er) valgt";
			
			$("#msg").html(txt);
		});


	});

</script>

Bruger #21777 @ 23.06.17 11:17

Nu tag den alle billeder på siden, det skal kun være class ="clickable"(billeder)

Det skal tilføjes her

HTML kode

 $("img").click(function () {

eller hvordan ?

Den skal hedde

JScript kode

 $(".clickable").click(function ()

Indlæg senest redigeret d. 23.06.2017 11:25 af Bruger #21777

<img style="border:5px solid black">

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler