Forum PHP.pl > PHP/JS Prblemik z onMouseOver

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: PHP/JS Prblemik z onMouseOver

Waloch016

11.04.2015, 18:58:39

A więc najpierw kod:

[PHP] pobierz, plaintext 
<script type="text/javascript">
function show_auto(id)
{
document.getElementById('auto').style.visibility="visible";
}
 
function hide_auto(id)
{
document.getElementById('auto').style.visibility="hidden";
}
</script>
<?php
 
include('includes/gora.php');
 
$gracz = mysql_fetch_array(mysql_query("SELECT kasa, samochodID FROM users WHERE id='$id_g'"))or die(mysql_error());
if(!($_GET['kup'])){
?>
<table>
	<tr>
		<td><img src="images/salon.jpg"</td>
		<td valign="top">Witaj drogi kierowco! Co? Samochód wyścigowy ?!? Niestety nie mamy takich. Ale skoro chcesz się ścigać to napewno znasz się na samochodach. Tak? No to nie ma żadnego problemu. Zakupiony samochód możesz podrasować aby mieć lepsze osiągi. Chodź pokażę Ci co moge to, co mogę zaoferować.</td>
	</tr>
</table><br><br>
<table>
<?
 
$samochod = mysql_query("SELECT * FROM samochody")or die(mysql_error());
while($sam = mysql_fetch_assoc($samochod)){
	echo"<tr><img src='samochody/". $sam['foto'] ."' onMouseOver='show_auto(".$sam['id'].")' onMouseOut='hide_auto(".$sam['id'].")'>".
		"<div id='auto_".$sam['id']."'>Nazwa: " .  $sam['nazwa'] . "<br>
		Opis: " .  $sam['opis'] . "<br>
		Vmax: " .  $sam['vmax'] . " km/h<br>
		do100: " . $sam['vsto'] . " s<br>
		Bak: " . $sam['paliwo'] . " l<br>
		Cena: " . $sam['cena'] . " zł<br>";
 
		if($gracz['samochodID'] > 0){
			echo "<font color='red'>Posiadasz samochód. Sprzedaj aktualny aby kupić nowy.</font>";
		}
		elseif($gracz['kasa'] >= $sam['cena']){
			echo"<a href='salon.php?kup=kup&id=". $sam['id']."'>Kup Samochód</a>";
		}
		else{
			echo "<font color='red'>Nie stać Cię!</font>";
		}
		echo"</tr></div>";
}
?>
</table>
[PHP] pobierz, plaintext

Do tego CSS:

[HTML] pobierz, plaintext 
#auto{
	margin-top:-200px;
	width: 200px;
	height: 200px;
	background-color: black;
	visibility:hidden;
}
[HTML] pobierz, plaintext

Zmianiłem na taki kod jednakże teraz pokazuje mi tekst na stale pod obrazkami.

markuz

11.04.2015, 19:02:37

Zamiast <div id="auto"> wstaw <div id="auto_{ID AUTA}">
Zdarzenia on i out wywołuj z parametrem id czyli np. onMouseOver='show_auto({ID AUTA})'
W nazwach funkcji dodaj parametr id czyli function show_auto(id)
I w treści zmień auto na auto_{ID}

Edit.
Już jesteś blisko. Jednak nadal nie widzę w "ciele" funkcji id które przekazujesz w parametrze (javascript).
Zauważ, że wcześniej twój div miał id = "auto", przez co twój CSS działał poprawnie, teraz twoje ID jest różne dlatego warto dodać klasę to tego diva np.
<div id="auto_{ID AUTA}" class="auto_desc"> i wtedy w CSS zamiast #auto wstaw .auto_desc.

PS. Następnym razem pisz nowy post a nie edytuj pierwszy żebym widział, że coś zmieniłeś.

Waloch016

11.04.2015, 20:06:35

[PHP] pobierz, plaintext 
<script type="text/javascript">
function show_auto(id)
{
document.getElementById(id).style.visibility="visible";
}
 
function hide_auto(id)
{
document.getElementById(id).style.visibility="hidden";
}
</script>
<?php
 
include('includes/gora.php');
 
$gracz = mysql_fetch_array(mysql_query("SELECT kasa, samochodID FROM users WHERE id='$id_g'"))or die(mysql_error());
if(!($_GET['kup'])){
?>
<table>
	<tr>
		<td><img src="images/salon.jpg"</td>
		<td valign="top">Witaj drogi kierowco! Co? Samochód wyścigowy ?!? Niestety nie mamy takich. Ale skoro chcesz się ścigać to napewno znasz się na samochodach. Tak? No to nie ma żadnego problemu. Zakupiony samochód możesz podrasować aby mieć lepsze osiągi. Chodź pokażę Ci co moge to, co mogę zaoferować.</td>
	</tr>
</table><br><br>
<table>
<?
 
$samochod = mysql_query("SELECT * FROM samochody")or die(mysql_error());
while($sam = mysql_fetch_assoc($samochod)){
	echo"<tr><img src='samochody/". $sam['foto'] ."' onMouseOver='show_auto(id)' onMouseOut='hide_auto(id)'>".
		"<div id='auto_".$sam['id']."' class='auto_desc'>Nazwa: " .  $sam['nazwa'] . "<br>
		Opis: " .  $sam['opis'] . "<br>
		Vmax: " .  $sam['vmax'] . " km/h<br>
		do100: " . $sam['vsto'] . " s<br>
		Bak: " . $sam['paliwo'] . " l<br>
		Cena: " . $sam['cena'] . " zł<br>";
 
		if($gracz['samochodID'] > 0){
			echo "<font color='red'>Posiadasz samochód. Sprzedaj aktualny aby kupić nowy.</font>";
		}
		elseif($gracz['kasa'] >= $sam['cena']){
			echo"<a href='salon.php?kup=kup&id=". $sam['id']."'>Kup Samochód</a>";
		}
		else{
			echo "<font color='red'>Nie stać Cię!</font>";
		}
		echo"</tr></div>";
}
?>
</table>
[PHP] pobierz, plaintext

Ma tak dalej nie wiem jak gówno rozwiązać próbowałem na kilka sposobów zmieniać i dalej nic... tekst sie schował ale po najechaniu się nie pokazuje...

markuz

11.04.2015, 20:08:20

document.getElementById(id) !== "<div id='auto_".$sam['id']."' - Widzisz różnicę?

Waloch016

11.04.2015, 20:13:44

Tak widze ze id sie roznia. ok. Z tym ze staralem sie to id wpisac tam na kilka sposobow lacznie z <?echo 'auto_".$sam['id']."'?> i nic mi to nie dało dalej nie pokazuje tekstu na obrazkach.

markuz

11.04.2015, 20:21:06

Załóżmy, że ID samochodu to 123 wtedy twój div będzie miał id == auto_123
A ty szukasz elementu o id == 123 który nie istnieje.
Więc można dojść do wniosku, że auto_123 != 123 - zgadza się?

Edit. Podpowiem, że brakuje Ci czegoś w funkcji JavaScript.

Waloch016

11.04.2015, 20:27:05

Ja to wszystko rozumiem tylko że to mi nie wyświetla napisów.

markuz

11.04.2015, 20:28:09

Pokaż kod po zamianach (PHP/HTML/JS + CSS)

Waloch016

11.04.2015, 20:38:03

[PHP] pobierz, plaintext 
<script type="text/javascript">
function show_auto()
{
document.getElementById !== <?echo 'auto_'.$sam['id'].''?>.style.visibility="visible";
}
 
function hide_auto()
{
document.getElementById !== <?echo 'auto_'.$sam['id'].''?>.style.visibility="hidden";
}
</script>
[PHP] pobierz, plaintext

Z Javascript jestem bardzo słaby prawie nic nie umiem. robie to bo tak wyszlo akurat. mysalem ze idzie to prosciej....

markuz

11.04.2015, 20:40:35

Ehh.. Dam Ci gotowe rozwiązanie:

[JAVASCRIPT] pobierz, plaintext 
function hide_auto(id)
{
document.getElementById("auto_" + id).style.visibility="hidden";
}
[JAVASCRIPT] pobierz, plaintext

To samo dla show_auto.
Jeżeli nic nie popsułeś w PHP/CSS to powinno działać.

Waloch016

11.04.2015, 20:45:10

[PHP] pobierz, plaintext 
<script type="text/javascript">
function show_auto(id)
{
document.getElementById("auto_" + id).style.visibility="visible";
}
 
function hide_auto(id)
{
document.getElementById("auto_" + id).style.visibility="hidden";
}
}
</script>
<?php
 
include('includes/gora.php');
 
$gracz = mysql_fetch_array(mysql_query("SELECT kasa, samochodID FROM users WHERE id='$id_g'"))or die(mysql_error());
if(!($_GET['kup'])){
?>
<table>
	<tr>
		<td><img src="images/salon.jpg"</td>
		<td valign="top">Witaj drogi kierowco! Co? Samochód wyścigowy ?!? Niestety nie mamy takich. Ale skoro chcesz się ścigać to napewno znasz się na samochodach. Tak? No to nie ma żadnego problemu. Zakupiony samochód możesz podrasować aby mieć lepsze osiągi. Chodź pokażę Ci co moge to, co mogę zaoferować.</td>
	</tr>
</table><br><br>
<table>
<?
 
$samochod = mysql_query("SELECT * FROM samochody")or die(mysql_error());
while($sam = mysql_fetch_assoc($samochod)){
	echo"<tr><img src='samochody/". $sam['foto'] ."' onMouseOver='show_auto(".$sam['id'].")' onMouseOut='hide_auto(".$sam['id'].")'>".
		"<div id='auto_".$sam['id']."' class='auto_desc'>Nazwa: " .  $sam['nazwa'] . "<br>
		Opis: " .  $sam['opis'] . "<br>
		Vmax: " .  $sam['vmax'] . " km/h<br>
		do100: " . $sam['vsto'] . " s<br>
		Bak: " . $sam['paliwo'] . " l<br>
		Cena: " . $sam['cena'] . " zł<br>";
 
		if($gracz['samochodID'] > 0){
			echo "<font color='red'>Posiadasz samochód. Sprzedaj aktualny aby kupić nowy.</font>";
		}
		elseif($gracz['kasa'] >= $sam['cena']){
			echo"<a href='salon.php?kup=kup&id=". $sam['id']."'>Kup Samochód</a>";
		}
		else{
			echo "<font color='red'>Nie stać Cię!</font>";
		}
		echo"</tr></div>";
}
?>
</table>
[PHP] pobierz, plaintext

Dalej nic.

a to CSS:

[HTML] pobierz, plaintext 
.auto_desc{
	margin-top:-200px;
	width: 200px;
	height: 200px;
	background-color: black;
	visibility:hidden;
}
[HTML] pobierz, plaintext

markuz

11.04.2015, 20:52:49

Spróbuj zrobić to w ten sposób:
http://jsfiddle.net/bq4g02um/

Waloch016

12.04.2015, 11:37:21

A więc tak:

[PHP] pobierz, plaintext 
<script type="text/javascript">
var auto = {
 
    show: function(id) {
        var el = document.getElementById("auto_" + id);
        el.style.display = "block";
    },
 
    hide: function(id) {
        var el = document.getElementById("auto_" + id);
        el.style.display = "none";
    }
}
</script>
<?php
 
include('includes/gora.php');
 
$gracz = mysql_fetch_array(mysql_query("SELECT kasa, samochodID FROM users WHERE id='$id_g'"))or die(mysql_error());
if(!($_GET['kup'])){
?>
<table>
	<tr>
		<td><img src="images/salon.jpg"</td>
		<td valign="top">Witaj drogi kierowco! Co? Samochód wyścigowy ?!? Niestety nie mamy takich. Ale skoro chcesz się ścigać to napewno znasz się na samochodach. Tak? No to nie ma żadnego problemu. Zakupiony samochód możesz podrasować aby mieć lepsze osiągi. Chodź pokażę Ci co moge to, co mogę zaoferować.</td>
	</tr>
</table><br><br>
<table>
<?
 
$samochod = mysql_query("SELECT * FROM samochody")or die(mysql_error());
while($sam = mysql_fetch_assoc($samochod)){
	echo"<tr><img src='samochody/". $sam['foto'] ."' onMouseOver='auto.show(" .  $sam['id'] . ")' onMouseOut='auto.hide(" .  $sam['id'] . ")'>".
		"<div id='auto_".$sam['id']."' class='auto_desc'>Nazwa: " .  $sam['nazwa'] . "<br>
		Opis: " .  $sam['opis'] . "<br>
		Vmax: " .  $sam['vmax'] . " km/h<br>
		do100: " . $sam['vsto'] . " s<br>
		Bak: " . $sam['paliwo'] . " l<br>
		Cena: " . $sam['cena'] . " zł<br>";
 
		if($gracz['samochodID'] > 0){
			echo "<font color='red'>Posiadasz samochód. Sprzedaj aktualny aby kupić nowy.</font>";
		}
		elseif($gracz['kasa'] >= $sam['cena']){
			echo"<a href='salon.php?kup=kup&id=". $sam['id']."'>Kup Samochód</a>";
		}
		else{
			echo "<font color='red'>Nie stać Cię!</font>";
		}
		echo"</tr></div>";
}
?>
</table>
[PHP] pobierz, plaintext

i CSS:

[PHP] pobierz, plaintext 
.auto_desc{
	margin-top:-200px;
	width: 200px;
	height: 200px;
	background: #000 url('images/no-img.png');
	display:none;
}
[PHP] pobierz, plaintext

W zasadzie działa z małymi zastrzeżeniami.

1.: W dalszym ciągu nie wyświetla tła.
2.: w ramach nauki objaśniłbyś mi to JS?? co to var itp??

Edit: strałem się tak: el.className = 'auto_desc';
Niestety nie działa.

markuz

12.04.2015, 12:28:34

W ramach nauki polecam kursjs.pl

Nie wyświetla tła bo pewnie podałeś złą ścieżkę.
el.className = 'auto_desc'; - Chcesz przypisać elementowi klasę którą już ma - więc jaki to ma sens?

Waloch016

12.04.2015, 12:32:02

Ścieżka jest ok bo nadaje normalnie margin-top:-200
Dodaje też wymiary 200x200
Dodaje też kolor tekstu czyt.: orange.

Jedyne ktore nie działa to background lub background-color.

Edit: ok juz wsio wiem.
Czarny background wyświetla się pod obrazkiem a tekst na obrazku. diwne ale rozwiąże.

Edit: Jeśli by to miało kiedyś komuś pomc to pozycja absolutna załatwiła sprawę.

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.