dreamweaver 模板用 CSS 無法顯現圖片

我想在template模板(.dwt)上多增加1個可變色的按鈕,(兩個png檔,用css寫)

但是網頁做出來只有連結(滑鼠移過去會顯示 手指),沒有圖片

請問這是要怎麼解決呢?

template的部分:

這是css

body

{

margin:0px;

padding:0px;

font-family:Verdana,arial,Geneva,sans-serif,新細明體,PMingLiU,微軟正黑體,Microsoft JhengHei;

font-size:75%;

color:#666;

background:url(../pic/tilt-bg.gif) repeat;

}

ul, li

{

padding: 0;

margin: 0;

list-style: none;

}

#area2

{

height:25px;

width:100%;

margin:0px;

padding:0px;

background-color:#aaa;

background:url(../pic/gbg.jpg) repeat;

z-index:90;

}

#area2-1

{

position:relative;

height:25px;

width:980px;

margin:0 auto;

padding:0px;

z-index:90;

}

/*menu background */

.btn_menu

{

width:150px;

height:25px;

margin:0px;

padding:0px;

float:left;

}

.btn_menu_IR

{

background:url(../pic/btn_ir.png) no-repeat;

}

.ch_menu_IR

{

background:url(../pic/btn_ir_b.png) no-repeat;

}

這是js

$(function(){$('.btn_menu_IR').hover(function(){$(this).toggleClass('ch_menu_IR');});});

$(function(){$('.btn_menu_IR').hover(function(){$('#main_menu').removeClass('test1');});});

$(function(){$('.btn_menu_IR').hover(function(){$('.btn_menu_product').removeClass('ch_menu_product');});});

這是網頁程式

<div id="area2">

<div id="area2-1"><a href="../about/Investor Relationship.aspx"><div class="btn_menu_IR btn_menu "></div></a>

</div>

已更新項目:

water 大大您好

我已經照你所說的方法檢查過了

問題依然存在

我用aspx寫(非dreamweaver 的templates)css圖片是可以顯現的

請問這是不是dreamweaver 的templates的問題?

應該如何解決呢?

2 個已更新項目:

water 大大您好

JQ檔案確認路徑跟檔案名稱是相符的

.btn_menu_IR內我只放圖片路徑

圖片路徑是正確的,也是相對路徑

設定長寬的語法我是放在.btn_menu裡

要顯現圖片的語法

我是2個放在一起

圖片還是無法顯現QAQ

因為所有網頁的按鈕是相同的,所以用Templates作

但是我試著單做一個網頁aspx,沒用Templates作,

程式碼、css等等全一模一樣,圖片是可以顯示的

所以是否非css的問題?

1 個解答

評分
  • water
    Lv 5
    6 年前
    最佳解答

    一般會出現這種情況請先檢查一下以下兩個問題

    1.圖片路徑是否正確

    2.連結的寬高是否跟圖片一致

    第一點來說

    要先確定您圖片路徑是放在「../pic」的路徑下

    這代表圖片所在位置應該是在當前目錄的上一層中的pic資料夾內

    如果這點確定沒問題再進行第二點的檢查

    第二點來說

    加設您的圖片是150*50的圖片

    那麼您的連結a應該也要設為150*50的大小

    才能夠正常顯示出完整圖片唷

    或是您在連結a中的內容會超過這個寬高也是可以的

    2014-10-09 21:25:33 補充:

    你有載入JQuery的檔案嗎?

    妳的JS看起來是JQuery的寫法

    不像是一般JS

    因為你是用JQuery的方式在控制滑鼠滑過連結的狀態

    若是沒有載入JQ檔案可能會造成無法正常使用的情況

    如果有載入也請確認路徑跟檔案名稱是否相符

    另外

    因為你的 .btn_menu_IR看起來裡面沒有再放其他東西

    那麼你應該要給他寬高這樣才會看得到東西

    而且妳是將背景圖片設定給btn_menu_IR沒有設的話

    我記得預設應該會是寬100%高是0px

    也有可能是這樣所以才看不到

    2014-10-13 11:05:58 補充:

    恩這個我就有點難判斷了

    一般來說

    會出現種情況都是圖片路徑有問題

    或是因為有用到JQuery控制一些檔案沒載入好才會這樣

    你試試看在「單做一個網頁aspx」將Body標籤中的所有資料清空

    然後用CSS將圖片設為Body的背景圖片看看抓的到嗎?

    抓的到的話就是JQuery檔案或.NET抓圖片的設定有問題

    不然就是你的頁面巢狀標籤太多讓z軸排序有問題

    造成圖片其實有載入可是被他東西檔到

    因為沒有完整的Code我也沒辦法除錯@@

    根據經驗來看以上是比較常見的原因 再來就要有完成file才能測試了

    或者你檢查一下圖片檔案名稱跟副檔名是否跟CSS載入的相同唄

    參考資料: 自己(http://engmeter.blogspot.tw/), 自己
還有問題?馬上發問,尋求解答。