Schlagwort: Image

background image mittig im div platzieren

#header
{
  width: 100%;
  height: 142px;
  background-image: url('./images/header.png');
  background-repeat: no-repeat;
  background-position: 50% 100%;
}

Mirror background image with CSS3

Here you can see how to mirror a background image with some cool new CSS3 attributes:

1
2
3
4
5
6
7
8
9
10
11
12
13

#background
{
  background-image: url('./images/myBackground.png');
  width: 1024px;
  height: 768px;
  /* Mirror the background image */
  -webkit-transform: scaleX(-1);
  -khtml-transform: scaleX(-1);
  -moz-transform: scaleX(-1);
  -ms-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  transform: scaleX(-1);
}

HTML5 – JavaScript setDragImage Beispiel

Dank HTML5 gibt es modernen Browser drag und drop-Events, welche natives Drag & Drop ermöglichen. Es ist sogar vorgesehen, dass man das Bild (welches während eines Drag-Vorgangs angezeigt wird) ändern kann. Dazu muss man sich der setDragImage bedienen:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

    <div id="wrapper" 
         style="width:200px;height:200px;background-color:blue;"
         ondragstart="handleDragStart(event)">
    </div>
    <script type="text/javascript">
      var divWrapper = document.getElementById('wrapper');
      divWrapper.setAttribute('draggable', 'true'); // for Chrome
      divWrapper.style.backgroundColor = 'red';
 
      function handleDragStart(event)
      {
        // Drag Image
        var image = document.createElement('img');
        image.src = './images/logo.png';
        // Event
        event.dataTransfer.effectAllowed = 'move';
        event.dataTransfer.setData('text/html', this.innerHTML);
        event.dataTransfer.setDragImage(image, -10, -10);
      }
    </script>

Anstelle eines Bildes (img) ist es auch erlaubt das neue HTML5 canvas-Element einzusetzen:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

    <div id="wrapper" 
         style="width:200px;height:200px;background-color:blue;"
         ondragstart="handleDragStart(event)">
    </div>
    <script type="text/javascript">
      var divWrapper = document.getElementById('wrapper');
      divWrapper.setAttribute('draggable', 'true'); // for Chrome
      divWrapper.style.backgroundColor = 'red';
 
      function handleDragStart(event)
      {
        // Drag Image
        var canvas = document.createElement('canvas');
        canvas.width = canvas.height = 100;
        var context = canvas.getContext('2d');
        context.fillStyle = 'rgb(255, 0, 255)';
        context.fillRect(0, 0, canvas.width, canvas.height);
        // Event
        event.dataTransfer.effectAllowed = 'move';
        event.dataTransfer.setData('text/html', this.innerHTML);
        event.dataTransfer.setDragImage(canvas, -10, -10);
      }
    </script>

Hinweise:

  • Damit ein Objekt die Drag-Eigenschaft aufweist, muss es das Attribut draggable="true" erhalten
  • Damit das draggable-Attribut auch im Safari funktionert, muss folgender CSS-Stil gesetzt werden: 
    1
2
3
4
5
6
7

          [draggable=true] 
      {
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        user-select: none;
      }
  • Für den Mozilla Firefox ist es notwendig, dass es ein ondragstart-Event gibt
  • Es muss zuerst dataTransfer.setData aufgerufen werden, damit dataTransfer.setDragImage funktioniert
  • dataTransfer.setData kann im Firefox nur in einem ondragstart-Event benutzt werden
  • dataTransfer.setDragImage erwartet ein Bild und eine Position (x,y). Die Position gibt ausgehend vom Mauszeiger an, an welcher Stelle das Drag Image angezeigt wird
  • Der Google Chrome erlaubt kein canvas-Element als Bild in setDragImage. Deshalb muss vorher das canvas-Objekt mit toDataURL in eine BASE64-kodierte Zeichenkette umgewandelt werden:
    • 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

        <div id="wrapper" 
         style="width:200px;height:200px;background-color:blue;"
         ondragstart="handleDragStart(event)">
    </div>
    <script type="text/javascript">
      var divWrapper = document.getElementById('wrapper');
      divWrapper.setAttribute('draggable', 'true'); // for Chrome
      divWrapper.style.backgroundColor = 'red';
 
      function handleDragStart(event)
      {
        // Drag Image
        var image = new Image();
        image.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==';
        var canvas = document.createElement('canvas');
        canvas.width = image.width;
        canvas.height = image.height;
        var context = canvas.getContext('2d');
        context.drawImage(image, 0, 0);
        var canvasImage = new Image();
        canvasImage.src = canvas.toDataURL('image/png');
        // Event
        event.dataTransfer.effectAllowed = 'move';
        event.dataTransfer.setData('text/html', this.innerHTML);
        event.dataTransfer.setDragImage(canvasImage, -10, -10);
      }
    </script>

Bild dynamisch mit JavaScript erzeugen

Mit JavaScript ist es möglich ein Bild (image) dynamisch zu erstellen und einem Element (z.B. einem Div) zuzuweisen. Das folgende Code-Beispiel veranschaulicht diesen Effekt:

1
2
3
4
5
6
7
8

    <div id="wrapper"></div>
    <script type="text/javascript">
      var divWrapper = document.getElementById('wrapper');
      var image = document.createElement('img');
      image.setAttribute('src', './images/logo.png');
      image.src = './images/logo.png'; // Alternative!
      divWrapper.appendChild(image);
    </script>

Hinweis: Die Pfadangabe zum Bild kann absolut oder relativ (ausgehend vom HTML-Dokument!) sein.

Java Micro Edition – Grafiken einbinden

Um mit J2ME Grafiken im eigenen MIDlet einbinden zu können, muss zuerst ein Image-Objekt erzeugt werden, welches dann einem ImageItem zugeordnet wird. Dieses ImageItem wird dann dem anzuzeigendem Form hinzugefügt.

Beispiel:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

private Image image;
private ImageItem imageItem;
private Form form = new Form("Titelleiste");
 
try
{
	image = Image.createImage("/texture.png");
}
catch (Exception e)
{
	// Fehlerbehandlung
}
 
imageItem = new ImageItem("Label", image, ImageItem.LAYOUT_DEFAULT, "Image not found");
form.append(imageItem);

Hinweis: Damit der relative Pfad „/“ benutzt werden kann, muss das anzuzeigende Bild im „“ im Java SE Platform SDK 3.0 abgelegt werden. Das gilt auch, wenn das Bild von einer Klasse aufgerufen wird, die sich in einem darunter liegendem Package befindet (siehe Bild).