html - Vis billede "alt" efter billede - Udvikleren.dk - Programmering, webdesign og grafik

Tags: jquery html css

<< < 1 2 > >>

Bruger #17284 @ 09.06.14 22:43

Jeg har flere billeder med forskellige "alt"'s, hvordan får jeg disse "alt"-tags til at blive vist efter hvert billede.

Er kommet frem til følgende, men det virker kun når jeg klikker på billedet:

HTML

HTML kode

 <img class="target" src="test.png" alt="1"/><br/><br/>
 <img class="target" src="test.png" alt="2" /><br/><br/>
 <img class="target" src="test.png" alt="3" /><br/><br/>
 <img class="target" src="test.png" alt="4" /><br/><br/>
 <img class="target" src="test.png" alt="5" /><br/><br/>
 <img class="target" src="test.png" alt="6" /><br/><br/>

jQuery

JScript kode

 $(document).ready(function() {
   $('.target').click(function(){
     var altimg = $(this).attr('alt');
     $(this).after(altimg);
   });
 });

12 svar postet i denne tråd vises herunder
3 indlæg har modtaget i alt 8 karma

Sorter efter stemmer Sorter efter dato

Bruger #17081 @ 09.06.14 23:04

1.258

JScript kode

 jQuery(function ($) {
     $(".target").each(function () {
         var $this = $(this);
         $this.after("<p>"+ $this.prop("alt") +"</p>");
     });
 });

Bruger #17284 @ 10.06.14 19:52

Du kan også lave den med CSS
CSS kode
 img:after {
   content: " (" attr(alt) ")";
 }
Det rigtigt, men hvad er supporten for det ?
Kører lidt efter at gøre det på den nemmeste måde, og så kører nogle polyfill scripts for de browsere som ikke har support for det

Anders; Det virker ikke for IMG-tags :-)
LÆS http://makandracards.com/makandra/8417-you-cannot-use-before-or-after-on-img-in-css

Bruger #16838 @ 10.06.14 12:37

169

Du kan også lave den med CSS

CSS kode

 img:after {
   content: " (" attr(alt) ")";
 }

Bruger #17284 @ 09.06.14 23:11

JScript kode

 jQuery(function ($) {
     $(".target").each(function () {
         var $this = $(this);
         $this.after("<p>"+ $this.prop("alt") +"</p>");
     });
 });

Hej Dan, det ser desværre ikke ud til at virke.
Se her: http://jsfiddle.net/m26dL/

Bruger #10216 @ 09.06.14 23:22

4.283

Virker fint. http://jsfiddle.net/wjus9/ - hele Dans kode, hvor der kun er ændret hvilket lib der skal loades. Du havde valgt "ingen".

Bruger #17284 @ 09.06.14 23:32

Virker fint. http://jsfiddle.net/wjus9/ - hele Dans kode, hvor der kun er ændret hvilket lib der skal loades. Du havde valgt "ingen".

Tak!

Næste spørgsmål, hvor skal jeg placere kode for at få den til at virke. Kan ikke lige få den til at gøre som jeg vil :-)

EDIT:

Det virker kun hvis jeg stiller det sådan op:

HTML kode

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
             <script type="text/javascript">
                 $(document).ready(function () {
                     $(".ArticleImage").each(function () {
                         var $this = $(this);
                         $this.after($this.prop("alt"));
                     });
                 });
             </script>

Hvis ikke "libet" ligger lige ovenpå virker det ikke, og hvis det ligger lige over så virker intet andet js på siden?

Indlæg senest redigeret d. 10.06.2014 00:18 af Bruger #17284

Bruger #17081 @ 10.06.14 14:59

1.258

Du kan også lave den med CSS
CSS kode
 img:after {
   content: " (" attr(alt) ")";
 }

Det rigtigt, men hvad er supporten for det

Bruger #10216 @ 10.06.14 16:31

4.283

IE8/9+ og så alle andre browsere.

http://caniuse.com/css-gencontent

Bruger #17284 @ 10.06.14 17:30

IE8/9+ og så alle andre browsere.

http://caniuse.com/css-gencontent

Det virker ikke på IMG tags :-)

Bruger #16838 @ 10.06.14 18:53

169

Du kan også lave den med CSS
CSS kode
 img:after {
   content: " (" attr(alt) ")";
 }
Det rigtigt, men hvad er supporten for det ?

Kører lidt efter at gøre det på den nemmeste måde, og så kører nogle polyfill scripts for de browsere som ikke har support for det

<< < 1 2 > >>

Vis billede "alt" efter billede

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler