Du solltest gar keinen Button verwenden. Mach einfach ein Link aus der Sache und du kannst dem Bild die prozentuale Größe mitgeben.

#Menuepic{  
  width: 5%;
}

<a href="javascript:" onclick="doSomething">
  <img id="Menuepic" src="menue.png" />
</a>
...zur Antwort

Für die Videos, die nicht direkt geladen werden sollen, verwendest du das Attribut "preload='none'". Das "autoplay"-Attribut muss dann natürlich auch raus. Das "controls"-Attribut rein, damit der Besucher das Video auch manuell starten kann.

<video class="vid" preload="none" controls  loop>
   <source src="/vids/1.webm" type="video/webm" /> 
   <source src="/vids/1.mp4" type="video/mp4" /> 
   <source src="/vids/1.ogv" type="video/ogg" /> 
</video>
...zur Antwort

Hier eine etwas ausführlichere Anleitung:

Zunächst das HTML:

<img src="//lorempixel.com/output/city-q-c-200-200-9.jpg" class="small pic1" />
<img src="//lorempixel.com/output/city-q-c-200-200-8.jpg" class="small pic2" />
<img src="//lorempixel.com/output/city-q-c-200-200-7.jpg" class="small pic3" />
<img src="//lorempixel.com/output/city-q-c-200-200-6.jpg" class="small pic4" />

Jedes Bild bekommt standardmäßig die Klasse "small". In dieser steht dann:

img.small {
    position: absolute;
    width: 100px;
    height: auto;
    z-index: 1;
}

Jetzt bekommt jedes Bild seine individuelle Klasse um es zu positionieren:

.pic1 {
    top: 100px;
    left: 200px;
}

.pic2 {
    top: 100px;
    left: 300px;
}

usw.

Anstatt inline-JavaScript in jedem Bild zu verwenden, geben wir jedem Bild mit der Klasse "small" ein Event mittels "addEventListener". Wir benötigen ein Event für "mouseover" und einen für "mouseout"

    var images = document.getElementsByClassName('small') || document.querySelectorAll('small'); //Selektiert alle HTML-Elemente mit der Klasse "small"
for (var i = 0; i < images.length; i++) { //Durchläuft alle Elemente
    images[i].addEventListener('mouseover', function () { //Gibt jedem Element ein mouseOver Event
        this.className += ' big'; //Bei Mouseover wird dem Element die Klasse "big" zugewiesen
    });

    images[i].addEventListener('mouseout', function () { //Wenn man das Bild verlässt
        this.className = this.className.replace(/ big/g, ''); //Wird die Klasse "big" wieder entfernt
    });
}

Jetzt noch die Klasse "big" im CSS definieren

img.big {
    width: 150px;
    height: auto;
    z-index: 100;
}

Damit das ganze etwas ansprechender ausschaut, nutzen wir CSS3 und erweitern die Klassen "small" und "big" etwas:

img.small {
    position: absolute;
    width: 100px;
    height: auto;
    z-index: 1;
    transition: all 0.5s; /* Kontrolliert die Animationsgeschwindigkeit, Bild soll langsam größer werden*/
}

img.big {
    width: 150px;
    height: auto;
    z-index: 100;
    box-shadow: 5px 5px 5px #333333; /* Schatten hinzufügen, wenn das Bild hervorgehoben wird */
}

Und so sieht das ganze dann aus: http://fiddle.jshell.net/Pisi2012/LsDXD/

...zur Antwort
    type: 'get',
    dataType: 'html', //<-- dataType hinzugefügt
    url: '/includes/ajax.php',
...zur Antwort
Weitere Inhalte können nur Nutzer sehen, die bei uns eingeloggt sind.