Resmin Üzerine Buton Ekleme yardım edin

05-05-2016, 12:02:01

Üyeliği durduruldu

merhaba arkadaşlar bir index sayfası yapıcam sayfada 2 adet buton olucak bir resim olucak arkaplan resmi sayfada anasayfaya git satış sayfasına git diye 2 buton olucak ama resmin üzerine bu butonları nasıl ekleyeceğim ? html olarak yardımcı olurmusunuz ?

05-05-2016, 15:32:04

#2

Tonks

F. STACK WEB + MOBILE DEV

limonluck adlı üyeden alıntı: mesajı görüntüle

merhaba arkadaşlar bir index sayfası yapıcam sayfada 2 adet buton olucak bir resim olucak arkaplan resmi sayfada anasayfaya git satış sayfasına git diye 2 buton olucak ama resmin üzerine bu butonları nasıl ekleyeceğim ? html olarak yardımcı olurmusunuz ?

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Index</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	<script>
		$(function(){

			$.background = function(){
  
			    var width = $(window).width();
			    var height = $(window).height();
			    $("img.background").css({
			      
			      "width" : width + "px",
			      "height" : height + "px"
			      
			    });
			  
			}

			$.background();


			var page_height = $(window).height();

			$(".home-and-sale").css("line-height", page_height + "px");

		});
	</script>
	<style>

		body {
		  margin: auto
		}

		.background {
		  position: fixed;
		  left: 0;
		  top: 0;
		  z-index: -1;
		}

		.home-and-sale {
			text-align: center;
		}

		.home-and-sale img {
			padding: 25px;
		}
	
	</style>
</head>
<body>
	<img src="http://wallup.net/wp-content/uploads/2014/11/smile-redhead-girl-drink-coffee.jpg" alt="" class="background" />
	<div class="home-and-sale">
		<a href="#"><img src="https://cdn3.iconfinder.com/data/icons/luchesa-vol-9/128/Home-128.png" alt="" class="home"></a>
		<a href="#"><img src="https://cdn0.iconfinder.com/data/icons/winter-lollipop/128/Cart.png" alt="" class="sale"></a>
	</div>
</body>
</html>

şöyle bir sayfa hazırladım hocam, resimleri kendine göre değiştirebilirsin.

27-02-2021, 01:00:29

#3

Joddey

Tonks adlı üyeden alıntı: mesajı görüntüle

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Index</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>
        $(function(){

            $.background = function(){
  
                var width = $(window).width();
                var height = $(window).height();
                $("img.background").css({
                  
                  "width" : width + "px",
                  "height" : height + "px"
                  
                });
              
            }

            $.background();


            var page_height = $(window).height();

            $(".home-and-sale").css("line-height", page_height + "px");

        });
    </script>
    <style>

        body {
          margin: auto
        }

        .background {
          position: fixed;
          left: 0;
          top: 0;
          z-index: -1;
        }

        .home-and-sale {
            text-align: center;
        }

        .home-and-sale img {
            padding: 25px;
        }
    
    </style>
</head>
<body>
    <img src="http://wallup.net/wp-content/uploads/2014/11/smile-redhead-girl-drink-coffee.jpg" alt="" class="background" />
    <div class="home-and-sale">
        <a href="#"><img src="https://cdn3.iconfinder.com/data/icons/luchesa-vol-9/128/Home-128.png" alt="" class="home"></a>
        <a href="#"><img src="https://cdn0.iconfinder.com/data/icons/winter-lollipop/128/Cart.png" alt="" class="sale"></a>
    </div>
</body>
</html>

şöyle bir sayfa hazırladım hocam, resimleri kendine göre değiştirebilirsin.

hocam şuan kullaniyorum hakkinizi helal edin

:-)