[java script] wyświetlanie obrazu

0

witam serdecznie
chciałbym zrobić taki mały bajer na stronie:

  1. wczytuję obrazek np tapeta.jpg 400x300
  2. okno w którym miałoby się to wyświetlać ma wymiary 300x200 czyli mniejsze niż obrazek

chciałbym by po wciśnięciu jakiegoś przycisku część obrazka była wyświetlana w tym oknie 300x200 w zależności czy wcisnąłem przycisk "lewo" czy "prawo"

jak moi drodzy?

0

Hm ..
Nasuwa mi się pomysł z overflow: hidden;

Mianowicie, w popupie tworzysz osobną stronę (np. image.html ) :

<html><head></head><body>
    <div style="overflow: hidden; width: 300px; height: 200px;"><img src="" alt="" id="obrazek" /></div>
</body></html>

Następnie, tworzysz okienko w JS:

var wnd = window.open('image.html', 'image');
var obrazek = wnd.document.getElementById('obrazek');
obrazek.src = 'sciezka_do_obrazka.png';
obrazek.style.position = "relative";
obrazek.style.left = "10px"; /// *1
obrazek.style.top = "20px"; /// *2

*1 - przesunięcie obrazka w lewo. 10 px oznacza że niewidoczne będzie 10px z lewej strony obrazka.
*2 - j/w, tylko że w dół

W ten sposób można by wyświetlać różne fragmenty jednego obrazka. Ale to tylko idea :)

0

a jak ktoś będzie miał włączoną blokadę okienek popup??

0

jak to przerobić, żeby obrazek przesuwał się po kliknięciu w jakiś przycisk? obecnie trzeba nacisnąć na obrazku i przesuwać nie puszczając myszki

<HTML>
<HEAD>
<TITLE>tescik</TITLE>
</HEAD>
<BODY>
<link rel="stylesheet" href="/ajlb/default.css" type="text/css">
<SCRIPT LANGUAGE="JavaScript" SRC="scripts.js"></SCRIPT>
<H1>tescik</H1><span id="1"></span>

<script language="javascript">
  clickposx = 0;
  clickposy = 0;

  scrollstartleft = 0;
  scrollstarttop = 0;

  ismousedown = false;

  maxleft = 0;
  maxtop = 0;


  function setClickPos(event, targetDiv) {
  
    clickposx = event.screenX;
    clickposy = event.screenY;
	
	var cnt = document.getElementById("1");
	cnt.innerHTML= clickposx +" : " + clickposy;

    scrollstartleft = parseInt(targetDiv.style.left);
    scrollstarttop = parseInt(targetDiv.style.top);
    
    var framingDiv = document.getElementById("main-window");

    maxleft = parseInt(targetDiv.style.width) - parseInt(framingDiv.style.width);
    maxtop = parseInt(targetDiv.style.height) - parseInt(framingDiv.style.height);

    ismousedown = true;
  }

  function mouseup(event, target) {
    ismousedown = false;
  }

  function moveTarget(event, target) {
    if (ismousedown == true) {
      var newposx = event.screenX;
      var newposy = event.screenY;
      
      var difx = newposx - clickposx;
      var dify = newposy - clickposy;

      var newleft = scrollstartleft + difx;
      if (newleft > 0) { newleft = 0; }
      if (newleft < (0 - maxleft)) { newleft = (0 - maxleft); }

      var newtop = scrollstarttop + dify;
      if (newtop > 0) { newtop = 0; }
      if (newtop < (0 - maxtop)) { newtop = (0 - maxtop); }

      moveToPosition(target, newleft, newtop);
    }
  }

  function moveToPosition(target, x, y) {
    target.style.left = "" + x + "px";

    target.style.top = "" + y + "px";
  }

</script>
</head>
<body onmouseup="mouseup(event, this)" >
<script language="javascript"> loadedFlag = false; </script>
<div id="main-window" style="width: 300px; height: 300px; overflow: hidden; position: relative; top: 100px; left:300px">
  <div id="scrolling-section" 
  style="top: -200px; left:-150px; width: 497px; height: 434px; position: absolute; background: URL(gg.jpg); top left no-repeat;" 
  onmousedown="if (typeof loadedFlag != 'undefined') {setClickPos(event, this);  }" 
  onmouseup="if (typeof loadedFlag != 'undefined') {mouseup(event, this); }" 
  onmousemove="if (typeof loadedFlag != 'undefined') {moveTarget(event, this);  }"
  >
  </div>
</div>
<script language="javascript"> loadedFlag = true; </script>
</BODY>
</HTML>
0

poradziłem sobie samemu ale dzięki :)

1 użytkowników online, w tym zalogowanych: 0, gości: 1