[HTML] Win Xp Wallpaper - Softwareontwikkeling

dinsdag 10 juni 2008 22:02

Acties:

PB0MV

Topicstarter

Ik ben sinds enige dagen bezig met een wallpaper generator in C#.
hierbij wordt een map gekozen met plaatjes, in C# worden deze verkleind en in een html neer gezet.
Nu heb ik omdat ik sommige plaatjes een stukje draai met areas de gebieden van de plaatjes aangegeven. als je over dit gebied gaat zal het plaatje groter worden. nu wil ik dat als je op een plaatje dubbelklikt dat deze als achtergrond wordt ingesteld.

Dit werkt allemaal in FF en IE7.
Als ik deze echter als wallpaper op Xp via: rmk op je bureaublad -> properties -> Desktop -> Browse op de achtergrond laat komen gaat het fout. ( dit is dus niet Active desktop !!!)
De wallpaper laad goed, en het zoomen doet het ook. Maar het klikken weigert het te doen.
Als ik echter een link in dezelfde pagina maak en daar eerst op klik, en dan op een plaatje klik dan werkt het wel.
Ik zal kijken of ik vanavond een simpel HTML voorbeeld kan maken.

Voorbeeldje ( weet niet hoe ik de code box een vaste hoogte kan geven

HTML:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
  <title></title>
  <script>
  var id = 27;
  var linkje = 'http://www.sonypictures.com/movies/intotheblue/site/extras/wallpapers/itb_wallpaper_sam800x600_a.jpg';
   function setTop()
   {
    var image = document.getElementById('img' + id);
    image.className = 'relatief ' + 'img' + id + ' top' ;
    var temp = image.onmouseout;
    image.onmouseout=function(){};
    var newImage = new Image();
    newImage.src = 'http://www.sonypictures.com/movies/intotheblue/site/extras/wallpapers/itb_wallpaper_sam800x600_a.jpg';
    var xdif = newImage.width - image.width;
    var ydif = newImage.height - image.height;
    image.useMap = '#mapz' + id;
    image.style.width = newImage.width;
    image.src = newImage.src;
    image.style.marginLeft = -(xdif /2);
    image.style.marginTop = -(ydif /2);

   }
   function setBack()
   {
    var image = document.getElementById('img' + id);
    image.className = 'relatief ' + 'img' + id;
    var newImage = new Image();
    newImage.src = 'http://www.sonypictures.com/movies/intotheblue/site/extras/wallpapers/itb_wallpaper_sam800x600_a.jpg';
    image.useMap = '#mapt' + id;
    image.style.marginLeft = 0;
    image.style.marginTop = 0;
    image.src = newImage.src;
    image.style.width = 100;
   }
   function setImage()
   {
   document.getElementById('pile').style.display = 'none';
   document.getElementById('aloneImage').style.display = 'block';
   document.getElementById('aloneImage').src = linkje;
   }
   function setPile()
   {
   document.getElementById('pile').style.display = 'block';
   document.getElementById('aloneImage').style.display = 'none';
   document.getElementById('aloneImage').src = '#';
   }
  </script>
  <style type="text/css">
    body,html{ width: 100%; height: 100%; }
      body { background-color: black; color:white; overflow: hidden;}
   area { background-color: Red;}
   .relatief { border: 0px none; position: absolute;}
   .top { z-index: 10; }

   #alone {position:absolute; left:0px; display: block; top:0px; width:100%; z-index: 10; }
   #aloneImage {display: none; }
   #aPile {position:absolute; left:50%; top:10px; background-color:black; color:white; border: #DDD 1px solid; z-index: 100; }
    .img27{left: 50%; top: 50%;}


  </style>
 </head>
<body onLoad="this.focus();">
 <div id="pile">
   <img src="http://www.sonypictures.com/movies/intotheblue/site/extras/wallpapers/itb_wallpaper_sam800x600_a.jpg" alt="Sony" name="img27" usemap="#mapt27" class="relatief img27" id="img27" onClick="setImage('orgs/59.png');" style="width: 100px;" />
   <map id="mapt27" name="mapt27">
    <area id="area27" name="area27" onMouseOut="setBack();" onMouseOver="setTop();" ondblClick="setImage();" coords="0,0,100,0,100,80,0,80" shape="poly" rel="alone"/>   </map>
   <map id="mapz27" name="mapz27">
    <area id="area27" name="area27" onMouseOut="setBack();" onMouseOver="setTop();" ondblClick="setImage();" coords="0,0,800,0,800,600,0,600" shape="poly" rel="alone"/>   </map>


</div>
  <div id="alone"><img src="" onDblClick="javascript:setPile();" id="aloneImage"></img><a href="javascript:setPile();" id="aPile">Back</a></div>
</body>
</html>

[ Voor 65% gewijzigd door StapelPanda op 10-06-2008 22:20 ]

Reageer