Türkiye haritası svg yeni sayfada açılması

28-05-2022, 11:42:04

#1

baloglubilisim

Kimlik doğrulama veya yönetimden onay bekliyor.

Selamlar değerli r10 üyeleri webmaster arkadaşlarım.
bir proje için türkiye haritası svg çalışmamız mevcut.

ancak şehirlerin üstüne gelince yeni sayfada açılmasını istiyoruz yardımcı olabilecek arkadaşlar varmıdır ?.
ankara üzerine gelince ankara.html şeklinde sayfaya yönlenmesini istiyoruz. ankara.html içerisine içerik girilecek .
28-05-2022, 11:48:45

#2

darness

Kod bloğunu paylaşın düzenleyelim
28-05-2022, 12:16:07

#3

baloglubilisim

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

Kod bloğunu paylaşın düzenleyelim

özelden yazdım hocam teşekkür ederim

28-05-2022, 12:23:46

bu html kodu hocam

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

<!--Stylesheets-->
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/default.css?update=01112013">

<!-- Jquery Plugins-->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/raphael.js?update=01112013"></script>
<script type="text/javascript" src="js/paths.js?update=01112013"></script>
<script type="text/javascript" src="js/init.js?update=01112013"></script>
<script type="text/javascript" src="js/jquery.tipsy.js?update=01112013"></script>
<title>Interactive Turkey Map with RaphaelJS</title>
</head>

<body>
<div class="container">
<h1 style="    color: #404040;
    font-size: 33px;
    font-weight: 400;
    line-height: 33px;
    margin: 0;
    text-transform: capitalize;    font-family: "Merriweather", Helvetica, Arial, sans-serif;">Hizmet Verdiğimiz İller</h1>
<div id="map">
  <div id="detail"> </div>
</div>

</div>


</body>
</html>

buda js kodu

/*
  Raphaël 2.1.0 - JavaScript Vector Library                         
  Copyright © 2008-2012 Dmitry Baranovskiy (http://raphaeljs.com)   
  Copyright © 2008-2012 Sencha Labs (http://sencha.com)             
  Licensed under the MIT (http://raphaeljs.com/license.html) license. 
  ***
  @title      : Interactive Turkey Map with RaphaelJS
  Edited by Selen GORA <http://selengora.com - me@selengora.com>

  ***
   
  @title: Added modalbox
  @description: change list;
                added simple modalbox written by me
                added new variable "content_dir" for $.get requests
                added ajax req. on obj.click function
  @author: Taner DOGAN <http://tanerdogan.com - hello@tanerdogan.com>
*/

    var iscountyselected = false;
    var previouscountyselected = "blank";
    var start = true;
    var past = null;
    var content_dir = "details";
    
    $(function(){
    
    var r = Raphael('map'),
    attributes = {
            fill: '#e0e0e0',
            stroke: '#999',
            'stroke-width': 0,
            'stroke-linejoin': 'round',
        },
    arr = new Array();
    
    for (var county in paths) {
        
        var obj = r.path(paths[county].path);
        
        obj.attr(attributes);
        
        arr[obj.id] = county;
            
//        if(arr[county] == 'blank')
//            obj.attr(attributes).attr( { fill: "#000" } ); /* set blank colour */

            
                            
        if(arr[obj.id] != 'blank') /* prevent change of blank colour and mouse click */
        {                
            obj.data('selected', 'notSelected');
            /* add ID to paths */
            obj.node.id = arr[obj.id];
            
            /* add title (for tooltip) to paths */
            obj.attr(attributes).attr( { title: paths[arr[obj.id]].name } );

            /* add tool tip to map     */ 
            $('svg a').tipsy({gravity: 'sw'});                
            /* end tool tip to map */            
            /* add crests to bottom and set county selections */
            obj.click(function(){    

            /* @author: Taner DOGAN //START */            
            $("#detail").click();
            $.get(content_dir+"/"+arr[this.id]+".html", function (html){                            
                $("#detail").empty().fadeIn(700).append(html).css("display", "block");                
                $("#detail").css({
                    "position": "absolute",
                    "top": ((($("#detail").parent().height() +100 -  $("#detail").height()) / 2) + "px")
                });
            }).error(function() { 
                warn = "<p style='text-align:center;'>Bu bölgede kayıt bulunamadı</p><a href='#' class='close'></a>";
                $("#detail").empty().fadeIn(700).append(warn).css("display", "block");    
            });
            /* @author: Taner DOGAN //END */
            
                if(paths[arr[this.id]].value == 'notSelected')
                {
                        this.animate({
                        fill: '#999'
                    }, 200);
            
                    paths[previouscountyselected].value = "notSelected";
                    paths[arr[this.id]].value = "isSelected";
                    //alert(paths[arr[this.id]].value = "isSelected");
                    
                    //alert(arr[this.id] + previouscountyselected);
                    previouscountyselected = paths[arr[this.id]].name;
                        
                    if (!start && past != this)
                    {
                        past.animate({ fill: '#e0e0e0'    }, 200);
                    }
                    past = this;
                    start = false;                    
                }
    
                    
                else if(paths[arr[this.id]].value == 'isSelected')
                    {
                        this.animate({
                            fill: '#999'
                        }, 200);
                        
                        paths[arr[this.id]].value = "notSelected"; /* set path value */    
                    }    
                
                });/* end mark selections */
        
            /* county hover bump */
            function hoverin(e){
                if(paths[arr[this.id]].value == 'notSelected')
                    this.animate({
                        fill: '#262e35'}, 300);                        
            }
            function hoverout(e){            
                if(paths[arr[this.id]].value == 'notSelected')
                    this.animate({
                        fill: '#e0e0e0'}, 300);
            }
            obj.mouseout(hoverout);
                
            obj.mouseover(hoverin);
            /* end county hover bump */
            

            
            /* hide name div - !important do not delete - ajax uses contents for event search */
            $('#countyInfo').hide();
            
            $('#spinner').hide();
            /* @author: Taner DOGAN //START */    
            $(".close").live("click", function(){
                $("#detail").css("display", "none").empty();    
                past.animate({ fill: '#e0e0e0'    }, 200);
                past.animate().mouseover( function() {
                    this.animate({
                        fill: '#262e35'}, 300);    })
                past.animate().mouseout( function() {
                    this.animate({
                        fill: '#e0e0e0'}, 300);    })                
            });
            
            /* @author: Taner DOGAN //END */
            
        }/* end check on blank */
        /*Resize Map*/
        r.setViewBox(0,0,1050,620,true);
        r.setSize("100%","100%");    
    } /* end raphael loop */    

});