Scripts - Tutorials - Forum - Downloads - Showcase - Contact

Artikels

VPN vergelijken

Algemeen

Beginpagina

FAQ

Grafische worm (243)

Links

Nieuwsartikels

Nieuwsarchief

Boeken programmeren

Overzicht

Samenwerken

Webhosting

Zoek op Sitemasters

Leden

Registreren

Ledenlijst

Ons team

Links

webhostingtop10.be

Sociale media

Follow @sitemasters

Sitemasters

Adverteren op Sitemasters?

Contacteer ons

RSS

Link naar ons

Donaties

Poll

Je moet ingelogd zijn om te stemmen.

Statistieken

Linkpartners

Forum

Categorieën > JavaScript

Afbeeldingen automatisch als link tonen (Opgelost)

weilander - 05/08/2009 21:41
Nieuw lid		Ik ben al een tijdje op zoek naar een script die het volgende kan doen. <img src="afbeelding.jpg"> automatisch omvormen naar <a href="afbeelding.jpg"><img src="afbeelding.jpg"></a> Dit moet 'on-the-fly' gebeuren, dus op het moment van het tonen van de webpagina.

6 antwoorden

Gesponsorde links

valles10 - 06/08/2009 10:29
HTML interesse		weilander schreef: Ik ben al een tijdje op zoek naar een script die het volgende kan doen. <img src="afbeelding.jpg"> automatisch omvormen naar <a href="afbeelding.jpg"><img src="afbeelding.jpg"></a> Dit moet 'on-the-fly' gebeuren, dus op het moment van het tonen van de webpagina. dat hoort toch niet bij javascript naja.. je kan met php replace doen? haal je de afbeeldingen uit een database? en waarom typ jeniet gewoon zelf <a href=""></a> ?

Martijn - 06/08/2009 11:11
Crew PHP		je zou je volledige body kunnen preg_replace()en...

PRO - 06/08/2009 11:19 (laatste wijziging 07/08/2009 10:05)

JS interesse

html4strict code - Bekijk de code zonder highlighting - Klap code in

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  <script>
  // Attach Click events to images, Barry de Rond
  function NavigateToImage(url) {
    if(url) {
    document.location.href=url;
    } else {
      throw new Error("Image URL undefined");
    }
  }

  function AddClickEventToImages() {
    var imageList = document.getElementsByTagName("img");
    for(var i = 0; i < imageList.length; i++) {   
      imageList[i].style.cursor="pointer";
      addEvent(imageList[i], "click", function(event){    
        if(document.all) {
          NavigateToImage(event.srcElement.src);
        } else {
          NavigateToImage(event.currentTarget.src);
        }
      });
    }
  }

  function addEvent(obj, evType, fn) {
    if (obj.addEventListener){ 
      obj.addEventListener(evType, fn, false); 
      return true; 
    } else if (obj.attachEvent){ 
      var r = obj.attachEvent("on"+evType, fn); 
      return r; 
    } else { 
      return false;
    }    
  }
  
  function removeEvent(obj, evType, fn) {
    if (obj.removeEventListener){ 
      obj.removeEventListener(evType, fn, false); 
      return true; 
    } else if (obj.detachEvent){ 
      var r = obj.detachEvent("on"+evType, fn); 
      return r;     
    } else { 
      return false;
    }  
  }

  
  window.onload = function() {
    AddClickEventToImages();
  }
  </script>
  </head>
  <body>
      <img src="Social_Twitter.png" alt="" />
      <img src="Social_RSS.png" alt="" />
      <img src="Social_Stumble.png" alt="" />
      <img src="Social_Technorati.png" alt="" />
  </body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  <script>
  // Attach Click events to images, Barry de Rond
  function NavigateToImage(url) {
    if(url) {
    document.location.href=url;
    } else {
      throw new Error("Image URL undefined");
    }
  }
 
  function AddClickEventToImages() {
    var imageList = document.getElementsByTagName("img");
    for(var i = 0; i < imageList.length; i++) {   
      imageList[i].style.cursor="pointer";
      addEvent(imageList[i], "click", function(event){    
        if(document.all) {
          NavigateToImage(event.srcElement.src);
        } else {
          NavigateToImage(event.currentTarget.src);
        }
      });
    }
  }
 
  function addEvent(obj, evType, fn) {
    if (obj.addEventListener){ 
      obj.addEventListener(evType, fn, false); 
      return true; 
    } else if (obj.attachEvent){ 
      var r = obj.attachEvent("on"+evType, fn); 
      return r; 
    } else { 
      return false;
    }    
  }
 
  function removeEvent(obj, evType, fn) {
    if (obj.removeEventListener){ 
      obj.removeEventListener(evType, fn, false); 
      return true; 
    } else if (obj.detachEvent){ 
      var r = obj.detachEvent("on"+evType, fn); 
      return r;     
    } else { 
      return false;
    }  
  }
 
 
  window.onload = function() {
    AddClickEventToImages();
  }
  </script>
  </head>
  <body>
      <img src="Social_Twitter.png" alt="" />
      <img src="Social_RSS.png" alt="" />
      <img src="Social_Stumble.png" alt="" />
      <img src="Social_Technorati.png" alt="" />
  </body>
</html>

Aangepast: vrijdag 7 Aug, 10:00 uur

weilander - 06/08/2009 22:57
Nieuw lid		De laatste hint ziet er veel belovend uit. Helaas zie ik de foutmelding: Bericht: 'currentTarget.src' is leeg of geen object

PRO - 07/08/2009 10:01
JS interesse		Ik had hem nog niet getest in MSIE. Werkt nu wel!

weilander - 07/08/2009 10:09 (laatste wijziging 12/08/2009 22:15)
Nieuw lid		Helemaal top. Hier kan ik wat mee!! Bedankt!!! [12-08-2009 update] Met de aanpassing window.open(url); i.p.v. document.location.href=url; wordt de afbeelding ook nog geopend in een nieuwe pagina

Gesponsorde links

Dit onderwerp is gesloten.

Actiefste leden van de maand

Actieve forumberichten