ugrás a tartalomhoz

Képcsere javascriptel nagyobbra külön ablakban klikk nélkül

zenoe · 2011. Ápr. 3. (V), 11.14
Sziasztok!
Olyan javascriptes megoldást keresek, ahol ha az egeret egy kép fölé viszem, akkor egy külön ablakban jelenik meg.
Ha az egeret elhúzom, akkor visszaáll az eredeti kép. Amit most találtam az majdnem jó (működik is), de a másik kép helyben cserélődik. Így viszont nagyobb második kép esetén eltolja az oldal többi részét. Van valakinek ötlete?
A mostani megoldás:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
	<title> proba </title>
</head>

<body>
<script type="text/javascript">

	kep1=new Image();
	kep1.src="118_pl_k.gif";

	kep2=new Image();
	kep2.src="118_pl_17-23.jpg";

	function egerakepen()
	{
	document.images['kepcsere'].src=kep2.src;
	}

	function egernincsakepen()
	{
	document.images['kepcsere'].src=kep1.src;
	}

</script>
<center>

	<img src="118_pl_k.gif" onmouseover="egerakepen()" onmouseout="egernincsakepen()" id="kepcsere" name="kepcsere" border="0" alt="Short description of the image" />
</center>
</body>

</html>
Üdv:
z
‹ Div wrapping javascript - xml nodeset ›
 ■
1

Új ablakban

Poetro · 2011. Ápr. 3. (V), 13.52
Bár az új ablakban megnyitás nem igazán jó megoldás, imhol:
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Page Title</title>
</head>
<body style="text-align: center;">
  <img src="http://farm6.static.flickr.com/5095/5584095077_8e462cf257_s.jpg" 
    alt="Emma" 
    data-large="http://farm6.static.flickr.com/5095/5584095077_8e462cf257.jpg" 
    id="myImage" />
  <script type="text/javascript">
    // Kikeressük az elemet a dokumentumban.
    document.getElementById('myImage').onclick = function () {
      // Nyitunk egy új ablakot.
      var win = window.open('about:blank', 'mywin', 'height=500, width=500,' +
            'scrollbars=no, resizable=no, status=no, toolbar=no, menubar=no,' +
            'location=no'),
          doc = win.document;
      // Kitöltjük a tartalmát.
      doc.write('<!DOCTYPE html>\n<html><head><title>' + this.alt +
        '</title></head><body style="margin: auto; text-align: center; ' +
        'width: 500; heigh=500; overflow: hidden;"><img src="' +
        this.getAttribute('data-large') + '" alt="' + this.alt + '" /></body></html>');
      // Becsukjuk a dokumentumot.
      doc.close();
      // Rákerül a fókusz az új ablakra.
      win.focus();
    };
  </script>
</body>
</html>
Hogy miért nem jó? Mert a legtöbb mai böngésző új fülön nyitja meg a tartalmat, ilyen az Internet Explorer és a Firefox is, és ott a fül teljes ablak szélességű, nem pedig egy külön ablak.
2

válasz

zenoe · 2011. Ápr. 5. (K), 16.02
Szia!

Háát már majdnem az igazi, de nem erre gondoltam. De azért nagyon köszi a segítséget!
Amit láttam már máshol működni (persze most egyet sem lelek), hogy kattintás nélkül, ha az egeret a kép fölé helyezed, akkor a kép nagyobb méretben megjelenik (mintegy kiemelkedik az oldalból). S amint az egér távozik, akkor a kép visszaáll az eredeti méretre és helyzetbe. Hát én ezt keresem.
Egyáltalán ez javascript-ben lehet?
Valaki, ötlet?:)
Üdv:
z
3

Azt írtad volna

Poetro · 2011. Ápr. 5. (K), 16.13
Ha azt írtad volna, amit szeretnél, akkor arra kaptál volna választ. De a következőt írtad:
akkor egy külön ablakban jelenik meg

Ez így ebben a formában külön ablakban jelenik meg.

Amit láttam már máshol működni (persze most egyet sem lelek), hogy kattintás nélkül, ha az egeret a kép fölé helyezed, akkor a kép nagyobb méretben megjelenik (mintegy kiemelkedik az oldalból)


Természetesen létezik, ezt hívják tooltip-nek. Rengeteg módon meg lehet valósítani, de JavaScript tudás nélkül eléggé problémás lenne. Vagy használj erre egy kész eszközt - például jQuery Tools -, vagy tanul még egy kicsit, és utána állj neki. Mindenképpen szükséges JavaScript tudás, hogy ezeket be tudd állítani.
4

tooltip

zenoe · 2011. Ápr. 5. (K), 16.41
Hmm...
Már evvel is sokat segítettél :).
Most legalább tudom, hogy mit keresek :)
Sajna most még minden csak annyira megy mint a makinak, de majd csak belejövök.

Üdv:
z
5

tooltip kezdőként

zenoe · 2011. Ápr. 6. (Sze), 19.10
Szia!
Hát egy napom ráment (mire is jó a betegszabi), de végül is előrébb jutottam. Hála neked :).
Már van egy működőképes tooltip-em. De meg is akadtam, mert a működőképes tooltipes minta html-t nemem bírom összefésülni az oldalammal.
A működő példa:
<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/css" href="style.css"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="hu" lang="hu">

<head>
	<title>Próba</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <script type="text/javascript">
//<![CDATA[
 var szoveg;
 function kell(e, w, eltol) {
	if (navigator.appName=="Microsoft Internet Explorer")
					{ y = e.clientY;	x = e.clientX; }
	else		{ y = e.pageY;	x = e.pageX; }

	document.getElementById('toltip').style.display = 'block';	
	document.getElementById('toltip').style.position = 'absolute';
	document.getElementById('toltip').style.width = w + 'px';
	document.getElementById('toltip').style.left = x + eltol + 'px';
	document.getElementById('toltip').style.top = y + 'px';
	
	szoveg = '<img src="118_pl_17-23.jpg" style="width: 200px; float: left; padding: 2px;" alt="bubi" />' + szoveg;
	document.getElementById('toltip').innerHTML = szoveg;	
}
 function nemkell() { 	document.getElementById('toltip').style.display = 'none'; }
 //]]>
  </script>

</head>

<body>
	<br /><br />
<img style='width: 100px' src='118_pl_k.gif'
		onmousemove='szoveg="tooltip képre. width = 200px"; kell(event, 200, 20);' 
		onmouseout='nemkell()' alt="bubi"/>

 <div id='toltip' style='display: none; position: relative; font: 11px arial; background: #FFFFC0; width: 100px; padding: 3px; border: 1px solid gray;
										 border-radius: 6px; -moz-border-radius: 6px;  -webkit-border-radius: 6px; 
										 filter:alpha(opacity=90); opacity:0.90; -moz-opacity:0.90;'>
 </div>
 
</body>

</html>
Fennakadtam ugyanis, hogy az oldalamon a kiszemelt kép egy table-ban van. A pélaoldalon pedig div hez kapcsolódik a tooltip. (Ha most sok hüleséget leírtam, az csak azért van mert kissé még robotikusan rakosgatom a részeket, ezért elnézést is kérek).
Az oldal (részlet), ahova be szeretném illeszteni:
<body>
<center>
<h1>Metszőollók</h1>
<br />
<br />
<form action="enctype">
<table cellspacing="5" cellpadding="10" width="80%" align="center">
<tr>
	<td valign="top"><img src="kunde/118_pl.jpg" width="93" height="93" alt="1. cikk" border="0" /></td>
	<td>
	<b>Metszőolló kunde 118 PL 17</b>
	<br />
	<font size="1">Árukód: #0001</font>
	<br />
	<br />
	Kovácsoltvas metszőolló<br />
	Kétélű<br />
	Bőr rögzíttő<br />
	Szigetelés<br />
	17 cm hosszú<br />
	230g tömegű<br />
	<br />
	Csomagolás:<br />
	Perforált - átlátszó- buborékfólia - nyomtatott technikai információk
	<br />
	<br />
	Ára: 100 Ft
    <p>
	<input type="text" class="form" name="db" value="1" size="2" />
	db
	<input type="button" class="button" value="Kosárba tesz" onclick="hozza('Termék
			 1.','#1111','100.00',document.forms[0].elements[0].value)" />
	</p>
    <hr />
	</td>
</tr>
<tr>
	<td valign="top"><img src="kunde/118_pl.jpg" width="93" height="93" alt="2. cikk" border="0" /></td>
	<td>
	<b>Metszőolló kunde 118 PL 19</b>
	<br />
	<font size="1">Árukód: #0002</font>
	<br />
	<br />
	Az 2. termék leírása ... Az 2. termék leírása ... Az 2. termék leírása ... Az 2. termék leírása ... Az 2. termék leírása ... Az 2. termék leírása ...
	<br />
	<br />
	Ára: 140 Ft
	<p>
	<input type="text" class="form" name="db" value="1" size="2" />
	db
	<input type="button" class="button" value="Kosárba tesz" onclick="hozza('Termék
			 2.','#1112','140.00',document.forms[0].elements[2].value)" />
	</p>
	<hr noshade="noshade" />
	</td>
</tr>
<tr>
	<td valign="top"><img src="kunde/118_pl.jpg" width="93" height="93" alt="3. cikk" border="0" /></td>
	<td>
    <b>Metszőolló kunde 118 PL 21</b>
	<br />
	<font size="1">Árukód: #1113</font>
	<br />
	<br />
	Az 3. termék leírása ... Az 3. termék leírása ... Az 3. termék leírása ... Az 3. termék leírása ... Az 3. termék leírása ... Az 3. termék leírása ...
	<br />
	<br />
    Ára: 310 Ft
	<br />
	<br />
	<input type="text" class="form" name="db" value="1" size="2" />
	db
	<input type="button" class="button" value="Kosárba tesz" onclick="hozza('Termék
			 3.','#1113','310.00',document.forms[0].elements[4].value)" />
	</td>
</tr>
</table>
</form>
<p><a href="http://zenoe.site88.net" target="_blank"><small><small>[z-no]<br /></small></small></a><small><small>2011</small></small></p>  
</center>
</body>
Köszi a segítséget előre is.

Üdv:
z
6

tooltip megoldva

zenoe · 2011. Ápr. 7. (Cs), 08.13
Hát sikerült megoldanom a tooltip kérdést (remélhetőleg). :)
Az eredmény itt látható, ha valakit érdekelne esetleg:

kert.comyr.com

A megoldáshoz vezető forrást pedig egy kedves kis oldalon találtam (ennyi reklámot megér szerintem):

pixy.hu


További szép napot mindenkinek:
z :)
7

ez nem jó? és elég egyszerű is

makezdtem · 2011. Ápr. 10. (V), 19.50

<html>
<head>
<title>Képváltos JavaScript</title>
</head>
<body>
<h1>JavaScript Képváló</h1>
<a href="home.html"
	onmouseover="document.images[0].src='home2.gif';"
	onmouseout="document.images[0].src='home1.gif';">
	<image border="0" src="home1.gif">
</a>
<br>
<a href="archives.html"
	onmouseover="document.images[0].src='archives2.gif';"
	onmouseout="document.images[0].src='archives.gif';">
	<image border="0" src="archives1.gif">
</a>
</body>
</html>