ページのURLに基づいて異なる背景画像

-3

Iveは異なる地域のホテル一覧を表示するウェブサイトで作業しています。最初のページで地図をクリックすると、州のページに移動します。レイアウトはすべての州のページで同じにしたいが、50 HTMLを作成するのではなく、URLがどの状態を参照しているかに基づいて、タイトル、背景、都市を変更できるようにしたい。どこから始めるべきかわからない。ページのURLに基づいて異なる背景画像

<html> 
<head> 
<title>State</title> 
<meta name="viewport" content="width=device-width"> 
<link href= "css2/state.css" rel="stylesheet" type="text/css"/> 
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript" SRC="/CFIDE/scripts/cfform.js"></SCRIPT> 

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"> 
<!-- 

function _CF_checkForm1(_CF_this) 
{ 
if (!_CF_hasValue(_CF_this.City, "SELECT")) 
{ 
    if (!_CF_onError(_CF_this, _CF_this.City, _CF_this.City.value, "Error in City text.")) 
    { 
     return false; 
    } 
} 

return true; 
} 


//--> 
</SCRIPT> 

</head> 
<body> 
<div id= "wrapper"> 
<div id= "headercontent"> 
    <a href="#"> 
     <div id= "logo"> 
      <img src= "images/logo.png" atl = "GTlogo" title = "GTlogo" width= "158"/></a> 
     </div> 
     <div id= "nav2"> 
     <ul> 
     <li> 
      <a href="https://www.travelocity.com/Flights">Book Airline</a></li><li> 
      <a href="http://www.flightview.com/">Check Flight</a></li><li> 
      <a href="http://www.res99.com/cars/search.cgi?src=10005170">Car Rental</a></li><li> 
      <a href="https://weather.com/">Check Weather</a></li><li> 
      <a href="http://government-traveler.com/newsletter/newsletter.htm">Newsletter</a></li><li> 
      <a href="http://www.government-traveler.com"><img id = "home" src = "images/home.png" height= "23" width= "30"/></a></li> 

     </ul> 
    </div> 
    <div id = "box"> 
     <div id = "subscribe"> 
     <form name= "form1" method="post" action= "http://www.americas-traveler.com/MLaction20.cfm" class="clearfix"> 
      <div> 
       <p id = "sub-text">Subscribe to our newsletter!</p> 
      </div> 
      <div id = "substuff" size= "viewport"> 
      <email 
       label for = "submit" class = "submit-icon"> 
       </label>  
       <input name= "email" id="textified" class= "fieldtxt" placeholder= "Your Email" autocomplete= "off" type="text" size= "viewport"/> 
       <input type= "submit" id = "submit" size="viewport" /></div> 
      </div> 
     </form> 
     </div> 
</div> 
</div> 
<div id= "nav"> 
    <div id= "nav_wrapper"> 
    <ul> 
     <li> 
      <a href="http://www.travelerseries.com/us.htm">Contact Us</a></li><li> 
      <a href="http://www.govhotel.us/marketing/marketing.htm">Advertise</a></li><li> 
      <a href= "http://www.gsa.gov/portal/content/104877">Per Diem</a><li> 
      <a href="#">Other Sites</a> 
      <ul> 
        <li><a href= "Americas-Traveler.com"> Americas Traveler</a></li> 
        <li><a href= "Motorsport-Traveler.com<"> Motorsport Traveler</a></li> 
        <li><a href= "Golf-traveler.com"> Golf Traveler</a></li> 
        <li><a href= "http://www.cruiseline-traveler.com/"> Cruiseline Traveler</a></li> 
        <li><a href= "http://www.canadian-traveler.com/"> Canadian Traveler</a></li> 
        <li><a href= "http://www.british-traveler.com/"> British Traveler</a></li> 
      </ul> 
     </li> 
    </ul> 
    </div> 
</div> 

<FORM NAME="Form1" ACTION="citypage.cfm?State=WA" METHOD="POST" onSubmit="return _CF_checkForm1(this)"> 


<SELECT NAME="City" SIZE="9" STYLE="width:200px"><OPTION VALUE="Aberdeen">Aberdeen<OPTION VALUE="Airway Heights">Airway Heights<OPTION VALUE="Anacortes">Anacortes<OPTION VALUE="Arlington">Arlington<OPTION VALUE="Auburn">Auburn<OPTION VALUE="Bainbridge Island">Bainbridge Island<OPTION VALUE="Bellevue">Bellevue<OPTION VALUE="Bellingham">Bellingham<OPTION VALUE="Blaine">Blaine<OPTION VALUE="Bothell">Bothell<OPTION VALUE="Bremerton">Bremerton<OPTION VALUE="Buckley">Buckley<OPTION VALUE="Burien">Burien<OPTION VALUE="Burlington">Burlington<OPTION VALUE="Camano Island">Camano Island<OPTION VALUE="Carson">Carson<OPTION VALUE="Cashmere">Cashmere<OPTION VALUE="Cathlamet">Cathlamet<OPTION VALUE="Centralia">Centralia<OPTION VALUE="Chehalis">Chehalis<OPTION VALUE="Chelan">Chelan<OPTION VALUE="Cheney">Cheney<OPTION VALUE="Clarkston">Clarkston<OPTION VALUE="Cle Elum">Cle Elum<OPTION VALUE="Colfax">Colfax<OPTION VALUE="Colville">Colville<OPTION VALUE="Coupeville">Coupeville<OPTION VALUE="Crystal Mountain">Crystal Mountain<OPTION VALUE="Dayton">Dayton<OPTION VALUE="Des Moines">Des Moines<OPTION VALUE="DuPont">DuPont<OPTION VALUE="Dupont">Dupont<OPTION VALUE="East Wenatchee">East Wenatchee<OPTION VALUE="Edmonds">Edmonds<OPTION VALUE="Ellensburg">Ellensburg<OPTION VALUE="Elma">Elma<OPTION VALUE="Ephrata">Ephrata<OPTION VALUE="Everett">Everett<OPTION VALUE="Federal Way">Federal Way<OPTION VALUE="Ferndale">Ferndale<OPTION VALUE="Fife">Fife<OPTION VALUE="Forks">Forks<OPTION VALUE="Fort Lewis">Fort Lewis<OPTION VALUE="Friday Harbor">Friday Harbor<OPTION VALUE="Gig Harbor">Gig Harbor<OPTION VALUE="Goldendale">Goldendale<OPTION VALUE="Grand Mound">Grand Mound<OPTION VALUE="Hoquiam">Hoquiam<OPTION VALUE="Husum">Husum<OPTION VALUE="Issaquah">Issaquah<OPTION VALUE="Kalama">Kalama<OPTION VALUE="Kelso">Kelso<OPTION VALUE="Kennewick">Kennewick<OPTION VALUE="Kent">Kent<OPTION VALUE="Kirkland">Kirkland<OPTION VALUE="La Conner">La Conner<OPTION VALUE="Lacey">Lacey<OPTION VALUE="Lakewood">Lakewood<OPTION VALUE="Langley">Langley<OPTION VALUE="Leavenworth">Leavenworth<OPTION VALUE="Liberty Lake">Liberty Lake<OPTION VALUE="Long Beach">Long Beach<OPTION VALUE="Longview">Longview<OPTION VALUE="Lynden">Lynden<OPTION VALUE="Lynnwood">Lynnwood<OPTION VALUE="Maple Valley">Maple Valley<OPTION VALUE="Marysville">Marysville<OPTION VALUE="Monroe">Monroe<OPTION VALUE="Moses Lake">Moses Lake<OPTION VALUE="Mount Rainier">Mount Rainier<OPTION VALUE="Mount Vernon">Mount Vernon<OPTION VALUE="Mountlake Terrace">Mountlake Terrace<OPTION VALUE="Mukilteo">Mukilteo<OPTION VALUE="Oak Harbor">Oak Harbor<OPTION VALUE="Ocean Park">Ocean Park<OPTION VALUE="Ocean Shores">Ocean Shores<OPTION VALUE="Okanogan">Okanogan<OPTION VALUE="Olympia">Olympia<OPTION VALUE="Omak">Omak<OPTION VALUE="Othello">Othello<OPTION VALUE="Pacific">Pacific<OPTION VALUE="Pasco">Pasco<OPTION VALUE="Port Angeles">Port Angeles<OPTION VALUE="Port Ludlow">Port Ludlow<OPTION VALUE="Port Orchard">Port Orchard<OPTION VALUE="Port Townsend">Port Townsend<OPTION VALUE="Poulsbo">Poulsbo<OPTION VALUE="Prosser">Prosser<OPTION VALUE="Pullman">Pullman<OPTION VALUE="Puyallup">Puyallup<OPTION VALUE="Quinault">Quinault<OPTION VALUE="Quincy">Quincy<OPTION VALUE="Redmond">Redmond<OPTION VALUE="Renton">Renton<OPTION VALUE="Richland">Richland<OPTION VALUE="Ritzville">Ritzville<OPTION VALUE="Rochester">Rochester<OPTION VALUE="SeaTac">SeaTac<OPTION VALUE="Seattle">Seattle<OPTION VALUE="Sedro-Woolley">Sedro-Woolley<OPTION VALUE="Sequim">Sequim<OPTION VALUE="Shelton">Shelton<OPTION VALUE="Silverdale">Silverdale<OPTION VALUE="Snohomish">Snohomish<OPTION VALUE="Snoqualmie">Snoqualmie<OPTION VALUE="Spokane">Spokane<OPTION VALUE="Spokane Valley">Spokane Valley<OPTION VALUE="Stevenson">Stevenson<OPTION VALUE="Sumner">Sumner<OPTION VALUE="Sunnyside">Sunnyside<OPTION VALUE="Tacoma">Tacoma<OPTION VALUE="Tacoma - Fife">Tacoma - Fife<OPTION VALUE="Toppenish">Toppenish<OPTION VALUE="Tukwila">Tukwila<OPTION VALUE="Tulalip">Tulalip<OPTION VALUE="Tumwater">Tumwater<OPTION VALUE="Union">Union<OPTION VALUE="Union Gap">Union Gap<OPTION VALUE="Vancouver">Vancouver<OPTION VALUE="Walla Walla">Walla Walla<OPTION VALUE="Washington">Washington<OPTION VALUE="Washougal">Washougal<OPTION VALUE="Wenatchee">Wenatchee<OPTION VALUE="Westport">Westport<OPTION VALUE="Winthrop">Winthrop<OPTION VALUE="Woodinville">Woodinville<OPTION VALUE="Woodland">Woodland<OPTION VALUE="Yakima">Yakima<OPTION VALUE="Yelm">Yelm<OPTION VALUE="Zillah">Zillah 
</SELECT> 

    <input type="Submit" value="Submit"> 
</FORM> 



</body> 
</html>

出典

2016-12-28 Angela Zuniga

このサーバー側またはクライアント側を処理しますか？その質問への答えはあなたの質問に対する答えを促すでしょう。 – pxslip

あなたの質問ははるかに具体的である必要があります。いくつかの情報を追加してください –

私はゆうが言っているものを取得します。 1つのレイアウト用に書かれたコードがありますか？はいの場合はここに投稿できますか？ –

さて、私はあなたに必要なときにそれを調整することができます。

// Declare your state. 
var my_state = "<?= $_REQUEST['state'] ?>"; 
// Array with all state images. 
var state_images = { 
    ... 
    montana: 'image/url/here.jpg', 
    ... 
}; 
// Array with all cities. 
var state_cities = { 
    ... 
    montana: ['missoula', 'great falls', ...], 
    ... 
}; 

// Populate the title. 
jQuery('.my-title-element').text(my_state); 

// Populate the cities. 
... Bunch of different ways to do this. 

// Populate the image. 
jQuery('.my-image-element').attr('src', state_images[my_state]);

実際にこれを行う方法はたくさんあります。これはONEアプローチの非常に基本的な概要です。正直なところ、私は一緒に行くアプローチではありませんが、それは基本的なものです。都市は実際にはAPIや何かを介して人口が増えているはずです。

出典

2017-01-04 22:00:40

ページのURLに基​​づいて異なる背景画像

答えて

関連する問題

ページのURLに基づいて異なる背景画像