html - Fuldt screen background images som link? hvordan? - Udvikleren.dk

Tags: css html

<< < 1 2 > >>

Bruger #21428 @ 02.07.16 19:09

Hej alle jeg sider her, og har lavet et baggrundsbillede som jeg har fået til at fungere perfekt som jeg selv ønsker..

Nu vil jeg bare gerne have det funger som et link, men det skal stadig vises på sammen måde.

Er der nongen der kan fortælle mig hvordan det er muligt. altså uanset hvor de klikker på siden bliver de stille videre til en anden url.

her er mit min side nu : https://vitester222.blogspot.com

og her er koden til:

HTML kode

 <!DOCTYPE html>
 <!DOCTYPE html>
 
 <head>
 
 <style>
 
 { margin: 0; padding: 0; }
 
 
 
 html { 
 
         background: url('http://i.imgur.com/sKpWDPU.jpg') no-repeat center center fixed; 
 
         -webkit-background-size: cover;
 
         -moz-background-size: cover;
 
         -o-background-size: cover;
 
         background-size: cover;
 
 }
 
 </style>
 
 </head><body></body></html>

Håber en her inde kan fortælle mig hvordan det fungere

I må alle have en god aften.

11 svar postet i denne tråd vises herunder
3 indlæg har modtaget i alt 3 karma

Sorter efter stemmer Sorter efter dato

Bruger #16075 @ 02.07.16 20:22

1.223

ref http://stackoverflow.com/questions/13349677/make-body-background-image-act-as-link
You can't have the background image be the link. You can use JS to catch all clicks that are on the body, but not on one of its children

Kode

// This is not cross browser, that would be a separate question
document.body.onclick = function(e) {
  if (e.target === document.body) {
      window.location = "link.html"
  }
}

You can use jQuery for a cross browser version

Kode

$('body').click(function(e){
    if (e.target === this) {
        window.location = "link.html"
    }
});

http://stackoverflow.com/questions/3360588/css-body-background-image-clickable

ref https://www.sitepoint.com/community/t/document-body-onclick-why-would-this-not-work/3399/2

Kode

<script type="text/javascript">
window.onclick = function() {alert('test');}
</script>

du har vist et <!DOCTYPE html> for meget
din code kunne se sådan ud:

Kode

<!DOCTYPE html>
<head>
    <style>
        *{ 
            margin: 0; padding: 0; 
        }
        html {
            background: url('tiger.jpg') no-repeat center center fixed;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }
    </style>
</head><body>
    <script type="text/javascript">
        // tested in chrome
        window.onclick = function () {
            window.location = "http://olsensweb.dk";
        }
    </script>
</body></html>

Indlæg senest redigeret d. 02.07.2016 20:23 af Bruger #16075

Bruger #16075 @ 04.07.16 15:29

1.223

Findes der en måde hvor jeg kan få det til at skelne imellem 2 baggrunds billeder. efter om man kommer fra pc eller mobil ?

du kan kigge på brugerens userAgent
hvis du vil i detaljen med hvilke mobil/tablet der anvendes kan du bruge denne http://hgoebl.github.io/mobile-detect.js/
eller
du kunne kigge på media query, men der er også nogle issues
ref http://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-mobile-device-in-jquery

58
Why not: if( screen.width <= 480 ) { // is mobile } – andrewrjones Jan 20 '13 at 1:05
12
@andrewrjones Retina devices double the width attribute value IIRC. Therefore, a retina iPhone will have a width of 640 and a height of 960 in portrait, and a width of 960 and a height of 640 in landscape. – Cole Johnson Aug 19 '13 at 2:18
29
You've just reinvented window.matchMedia: developer.mozilla.org/en-US/docs/Web/API/Window.matchMedia – Paul Irish Feb 26 '14 at 19:27

http://cssmediaqueries.com/
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
https://responsivedesign.is/develop/browser-feature-support/media-queries-for-common-device-breakpoints

ref google "javascript onclick background image safari problem"

ref http://stackoverflow.com/questions/3025348/how-do-i-use-jquery-for-click-event-in-iphone-web-application/4910962#4910962

You need to listen for the "touchstart" and "touchend" events. Add the listeners with jQuery...
$('span').bind( "touchstart", function(e){alert('Span Clicked!')} );

ref http://stackoverflow.com/questions/3705937/document-click-not-working-correctly-on-iphone-jquery

The answer is incredibly simple: Just set the css cursor: pointer.

/iP/i.test(navigator.userAgent) && $('*').css('cursor', 'pointer');
basically, on iOS, things aren't "clickable" by default -- they're "touchable" (pfffff) so you make them "clickable" by giving them a pointer cursor. makes total sense, right??

http://stackoverflow.com/questions/4825498/how-can-i-find-out-which-browser-a-user-is-using
http://stackoverflow.com/questions/1294586/browser-detection-versus-feature-detection

din code kunne se sådan ud:
demo http://udvikleren.olsensweb.dk/test2.html

Kode

 <!DOCTYPE html>
 <head>
	<title>demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <style>
         *{ 
             margin: 0; padding: 0; 
         }     
     </style>
</head>
<body>
     <script type="text/javascript">
		// http://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-mobile-device-in-jquery
		if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
			// her kunne man give hver mobile hvert sit img 
			document.body.style.background = "url('an_android_phone.jpg') no-repeat center center fixed";				
			// her mangler lidt style
		}		
		else{
			document.body.style.background = "url('http://i.imgur.com/sKpWDPU.jpg') no-repeat center center fixed";
			// http://stackoverflow.com/questions/28882471/how-to-correctly-set-background-image-in-a-html-page-using-a-javascript-function
			document.body.style.webkitBackgroundSize = "cover";
			document.body.style.mozBackgroundSize = "cover";
			document.body.style.msBackgroundSize = "cover";
			document.body.style.backgroundSize = "cover";
		}
		 
         window.onclick = function () {
             window.location = "http://dr.dk";
         }
     </script>
</body></html>

Bruger #16075 @ 06.07.16 17:14

1.223

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
http://webdesign.tutsplus.com/articles/quick-tip-dont-forget-the-viewport-meta-tag--webdesign-5972
http://www.w3schools.com/css/css_rwd_viewport.asp

som jeg skrev tidligere kunne du anvende medie query'es
jeg prøvede at lave den for sjov, bare så du kan se ide'en.

hvis du prøver at lave din browser vindue mindre end 768px får du et andet billede end hvis hvis dit browser vindue er størrer end 767px

demo http://udvikleren.olsensweb.dk/test3.html

Kode

<!DOCTYPE html>
<head>
    <title>demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        *{
            margin: 0; padding: 0;
        }
        /* Desktops and laptops ----------- */
        @media only screen  and (min-width : 768px) {
            body {
                background: url('http://i.imgur.com/sKpWDPU.jpg') no-repeat center center fixed;
                -webkit-background-size: cover;
                -moz-background-size: cover;
                -o-background-size: cover;
                background-size: cover;
            }
        }

        @media only screen  and (max-width : 767px) {
            body {                
				background: url('an_android_phone.jpg') no-repeat center center fixed;
				// her mangler noget styling
            }
        }
    </style>
</head><body>
    <script type="text/javascript">        
        window.onclick = function () {
            window.location = "http://dr.dk";
        }
    </script>
</body></html>

Bruger #21428 @ 02.07.16 21:10

Nu har jeg forsøgt således men virker heller ikke :/..

HTML kode

 <!DOCTYPE html>
 
 <head>
 
 <style>
 
 { margin: 0; padding: 0; }
 
 
 
 html { 
 
         background: url('http://i.imgur.com/sKpWDPU.jpg') no-repeat center center fixed; 
 
         -webkit-background-size: cover;
 
         -moz-background-size: cover;
 
         -o-background-size: cover;
 
         background-size: cover;
 
 }
 
 </style>
 
 
 </head><body>
 
 <script>
 
 $('body').click(function(e){
 
     if (e.target === this) {
 
         window.location = "link.html"
 
     }
 
 });
 
 </script>
 
 </body></html>

Jeg har ikke mulighed for at køre php script på en en blog desværre ..
Den driller mig godt nok denne..

Indlæg senest redigeret d. 02.07.2016 21:11 af Bruger #21428

Bruger #16075 @ 02.07.16 21:17

1.223

ref

Kode

<script>
 $('body').click(function(e){
     if (e.target === this) {
         window.location = "link.html"
     }
 });
</script>

du mangler at indlæsse jquery

skal se sådan ud

Kode

 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('body').click(function(e){
		 
			 if (e.target === this) {
		 
				 window.location = "link.html"
		 
			 }
		 
		 });
	});
</script>

Bruger #21428 @ 02.07.16 21:20

Den reagere stadig ikke på det desværre..

det ser således ud nu.

HTML kode

 <!DOCTYPE html>
 <!DOCTYPE html>
 <head>
 <style>
 { margin: 0; padding: 0; }
 
 html { 
         background: url('http://i.imgur.com/sKpWDPU.jpg') no-repeat center center fixed; 
         -webkit-background-size: cover;
         -moz-background-size: cover;
         -o-background-size: cover;
         background-size: cover;
 }
 </style>
 </head>
 <body>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
 <script type="text/javascript">
     $(document).ready(function() {
         $('body').click(function(e){
          
              if (e.target === this) {
          
                  window.location = "link.html"
          
              }
          
          });
     });
 </script>
 </body></html>

Bruger #16075 @ 02.07.16 23:09

1.223

ref http://stackoverflow.com/questions/1925097/jquery-document-body-one-click-event
kan du udskifte body med document

du kan lave dit js så simpelt
tested i chrome og firefox

Kode

<!DOCTYPE html>
<head>
    <title>demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
        *{ margin: 0; padding: 0; }

        body {
            background: url('http://i.imgur.com/sKpWDPU.jpg') no-repeat center center fixed;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $(document).click(function (e) {
                window.location = "link.html";
            });
        });
    </script>

</head>
<body>

</body></html>

Bruger #21428 @ 03.07.16 18:10

Jeg køre den således nu, den virker også rigtigt godt i min firefox blowser men ikke på mobil og tablet desværre..

HTML kode

 <!DOCTYPE html>
 <head>
     <style>
         *{ 
             margin: 0; padding: 0; 
         }
         html {
             background: url('https://background.') no-repeat center top fixed;
             -webkit-background-size: cover;
             -moz-background-size: cover;
             -o-background-size: cover;
             background-size: cover;
         }
     </style>
 
 </head><body>
     <script type="text/javascript">
         // tested in chrome
         window.onclick = function () {
             window.location = "https://url";
         }
     </script>

Bruger #16075 @ 03.07.16 18:50

1.223

den code vist 02.07.16 23:09 er som demo her
http://udvikleren.olsensweb.dk/test.html
nu også tested i chrome på en samsung S6 android -- mangler noget af toppen af baggrunden -- OK

den code du viste 03.07.16 18:10 mangler da afsluttende </body></html> men det er nok dovenskab du ikke viste det
jeg har lagt den op her
http://udvikleren.olsensweb.dk/test1.html
og tested den i chrome på en samsung S6 android -- mangler noget af toppen af baggrunden -- OK
samt på min win7 i chrome og firefox -- OK

Jeg køre den således nu, den virker også rigtigt godt i min firefox blowser men ikke på mobil og tablet desværre..

hvilke browser anvender du på din mobil og tablet ??
hvilke styre system ??
jeg ved at safari kan være special, i andre hensende (har ikke safari installeret mere til at teste på)

Bruger #21428 @ 04.07.16 08:44

Hej Ronny, det jeg rigtigt ked af, jeg har overset din besked.
Det virker bare som det skal nu

Må jeg høre dig om en sidste ting?
Findes der en måde hvor jeg kan få det til at skelne imellem 2 baggrunds billeder. efter om man kommer fra pc eller mobil ?

Det vil være prikken over I'et for mig at få det til at fungere også..

mvh..
Og mange tak for din hjælp.

Indlæg senest redigeret d. 04.07.2016 08:48 af Bruger #21428

<< < 1 2 > >>

Fuldt screen background images som link? hvordan?

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler