Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Jak zmienic [CSS][HTML][JavaScript]
Forum PHP.pl > Forum > Przedszkole
slid3r
16.12.2021, 06:54:53
Witam,

mam okienka ifarme jak najadę na odnośnik text.
Czy jest możliwość zamiany <a href="..... na zwykly text ?
Nie chcę odnośnika. Potrzebuję tylko takie okienko kiedy najadę na dany text.


[HTML] pobierz, plaintext 
  1. document.getElementById("myframe").src=url;
[HTML] pobierz, plaintext



czy jest możliwość zmiany src=adres i potem używać <div id="xxx" adres="forum.php.pl" ?



Html :

[HTML] pobierz, plaintext 
  1.  
  2. <html lang="pl">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <script src="js/javascript.js"></script>
  7.     <link rel="stylesheet" href="css/styles.css">
  8. </head>
  9. <body>
  10.     <div id="boxht" class="cint"> 
  11. 	<iframe id="myframe" frameBorder="0"></iframe>
  12.     </div>
  13.     <article>
  14.       <h1>popup</h1>
  15.  
  16.        <ul>
  17.            <li>okienko ifarme 1 <a href="google.pl" target="_blank" onmouseout="boxhtOut()" onMouseOver="boxhtIn(); loadintoIframe(this.href)">dane1</a></li>
  18.            <li>okienko ifarme 2 <a href="forum.php.pl" target="_blank" onmouseout="boxhtOut()" onMouseOver="boxhtIn(); loadintoIframe(this.href)">dane2</a></li>
  19.            <li>okienko ifarme 3 <a href="wp.pl" target="_blank" onmouseout="boxhtOut()" onMouseOver="boxhtIn(); loadintoIframe(this.href)">dane3</a></li>
  20.            <li>okienko ifarme 4 <a href="onet.pl" target="_blank" onmouseout="boxhtOut()" onmouseover="boxhtIn(); loadintoIframe(this.href)">dane4</a></li>
  21.        </ul>
  22.        </article>
  23.  
  24. </body>
  25. </html
  26.  
[HTML] pobierz, plaintext


JS:

[HTML] pobierz, plaintext 
  1. function loadintoIframe(url){
  2.   if (document.getElementById)
  3.     document.getElementById("myframe").src=url;
  4. }
  5.  
  6. function boxhtIn() {
  7.     document.getElementById('boxht').style.display = 'inline';
  8. }
  9. function boxhtOut() {
  10.     document.getElementById('boxht').style.display = 'none';
  11. }
  12. function boxht3In() {
  13.     document.getElementById('boxht3').style.display = 'inline';
  14. }
  15. function boxht3Out() {
  16.     document.getElementById('boxht3').style.display = 'none';
[HTML] pobierz, plaintext



CSS:
[HTML] pobierz, plaintext 
  1. #myframe {
  2.     position: fixed;
  3.     width: 35%; 
  4.     height: 65%; 
  5. }
  6. #boxht{
  7.     display: none;
  8.     position:fixed;
  9.     z-index: 100;
  10.     width: 35%;
  11.     height: 65%;
  12.     top:16%; 
  13.     left:60%; 
  14.     padding-bottom:0px;
  15.     border: 2px solid #dfdfdf;
  16.     -moz-border-radius: 10px 10px 10px 10px;
  17.     -webkit-border-radius: 10px 10px 10px 10px;
  18.     border-radius: 10px 10px 10px 10px;
  19.     background:#ffffbb;
  20. }
  21.  
  22.  
  23. .cint:before, .cint:after {
  24.     content: "";
  25.     display: block;
  26.     position: absolute;
  27. }
  28. .cint:before {
  29.     z-index: 110;
  30.     bottom:-40px;
  31.     left:-30px;
  32.     height:79px;
  33.     width:85px;
  34.     background-image:url(../img/piedra2c.png);
  35.     -webkit-transform: rotate(-50deg);
  36.     -moz-transform: rotate(-50deg);
  37.     transform: rotate(-50deg);
  38. }
  39. .cint:after {
  40.     z-index: 110;
  41.     top: -42px;
  42.     right:-20px;
  43.     width: 93px;
  44.     height:80px;
  45.     background-image:url(../img/piedra1.png);
  46.     -webkit-transform: rotate(-12deg);
  47.     -moz-transform: rotate(-12deg);
  48.     transform: rotate(-12deg);
  49. }
  50.  
  51.  
  52. @media only screen and (max-width:750px), handheld {
  53. 	.cint:before {
  54. 		background-image: none
  55. 	}
  56. 	.cint:after {
  57. 		background-image: none
  58. 	}
  59. 	#boxht {width: 0; height: 0}
  60. 	#myframe {width: 0; height: 0}
  61. }
  62.  
  63.  
[HTML] pobierz, plaintext
Neutral
16.12.2021, 15:15:51
Przypisz do zmiennej wartość, a później wyodrębnij ją używając atrybutu z rodziny data-*.
Tutaj, np. data-bump="noisy".
MDN
Odnośnik przekierowuje do artykułu, gdzie jest wyjaśnione jak pozyskać wartość z tych atrybutów.
StrefaPi
16.12.2021, 16:27:57
Zamień "a" na elementy "span" lub "div" z elementami data jak kolega wyżej mówił
slid3r
17.12.2021, 02:46:54
zmieniałem wczesniej tak jak radzisz <A na <span nawet <P wink.gif wtedy kazda zmiana sypie mi src=url dla ifarme chyba w JQ.[html][/html] [php][/php]
Neutral
17.12.2021, 09:49:26 
[HTML] pobierz, plaintext 
  1. <p data-src="http://example.com">Paragraph</p>
[HTML] pobierz, plaintext

Kod
var extraction=document.querySelector('p');
console.log(extraction.dataset.src); // http://example.com
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.