• ベストアンサー

htmlの設定の仕方がわからず困ってます。

以下のフリーソフトの設定の仕方が解らずに困っています。 http://www.econosys.jp/system/iz_zoom.html 使用方法3番目の表記で iz_zoomを起動する画像にIDを追加します(例:image1 というIDを追加) <img src="thumb.gif" /> → <img id="image1" src="thumb.gif" /> とありますが、画像にIDを追加のしかたが解りません。 htmlテキストエディタでも画像にIDを追加することは出来なさそうですし 画像ソフト(フォトショップエレメントを使ってます)でもそのような記述 が出来るような機能が見当たりません。 それとも画像を添付するhtmlファイルのどこかへこの記述をするので しょうか?(デモのhtmlファイルへはそのような記述がないので多分 htmlファイルへ記述するのではないと思いますが・・・) 実際にこのソフトを使用している方等分かるかた是非お教えください。 よろしくお願いします。

質問者が選んだベストアンサー

  • ベストアンサー
  • usagikun2
  • ベストアンサー率28% (52/182)
回答No.2

デモのhtmlをホームページビルダーで開いて下記の部分を増やして行けば良いのですが・・・ <script type="text/javascript"> var z = new iz_zoom('image1',{ 'templatefile' : 'js/iz_zoom/template01.html' , 'cssfile' : 'js/iz_zoom/template01.css' , 'imagefile' : 'large_images/image01.jpg' , 'x' : -10 , 'y' : 100 } ); >var z = new iz_zoom('image1',{  var z = new iz_zoom('image**',{  **部分を書き換える! また、サムネール部分の写真と拡大写真は別のホルダーに入って居ますからその辺の理解が必要に成って来ます、また、このデモの場合だとサムネールと拡大写真で画像拡張子が違っていますので書き換えか画像の拡張子変更が必要に成ります。

daaaad
質問者

お礼

回答ありがとうございます。 なるほどhtmlを書き換えるのですね。 以下の考え方でいいんでしょうか? 1. var z = new iz_zoom('image1',{                  ↑この番号を順番に番号をつける 2. 'imagefile' : 'large_images/image01.jpg' ,                 ↑この部分に画像のファイル名を記入 デモの内容ですと縮小画像と拡大画像をそれぞれ個別に設定してあるので 2の部分へ大きい画像のファイル名を書き換えればいいんですね。 とりあえず一度トライしてみます。 ありがとうございます。

その他の回答 (1)

  • torayoshi
  • ベストアンサー率62% (910/1449)
回答No.1

> それとも画像を添付するhtmlファイルのどこかへこの記述をするのでしょうか? その通りです。 画像にIDを追加とは、画像ファイルに対してなにかを加工するのではなく、 htmlファイルに追加記述するのです(つまりhtml編集) デモのhtmlファイルにはすでに八つのIDが追加記述してあります。 (id="image1"~id="image8") デモhtmlを参考にしてください。 というか、デモhtmlの不要部分を削除すればそのまま使えますね。

daaaad
質問者

お礼

回答ありがとうございました。 画像にIDを追加するとゆうことで画像へIDを追加する方法をずっと さがしてました。 htmlファイルをいじればいいとゆうことですので一度トライしてみます。 ありがとうございました。

関連するQ&A

  • 記述の仕方を教えて下さい。

    以下のHTMLをdocument.writeを使って記述しているのですが、エラーになって動きません。 多分”と’の使い方が原因だと思います。 記述の仕方を教えて下さい。 <A id="_HPB_ROLLOVER1" onmouseout="HpbImgSwap('_HPB_ROLLOVER1','hina_n_image.gif');" onmouseover="HpbImgSwap('_HPB_ROLLOVER1','hina_m_image.gif');"><IMG src="hina_n_image.gif" width="364" height="203" border="0" name="_HPB_ROLLOVER1"></A>

  • changeimgの際のalt設定

    head部分の記述 <!-- function changeimg(src) { document.getElementById("img").src = src; } //--> </script> body部分の記述 <a href="javascript:changeimg('./img/img02.gif');">02の絵です</a> <img src="./img/img01.gif" alt="01の絵" id="img" width=100 height=100> このようにすると「02の絵です」をクリックすると01の絵が02に変わる、というのを、検索して見つけました。 これを使いたいのですが、img02.gifにalt属性をつけるには、どのようにしたらよいでしょうか。 よろしくお願いします。

  • 外部ファイルの記述の仕方

    HTMLにリンクを指定している画像にマウスが重なったときに画像を変化するようにHTML文法にJavaScriptを指定しているのですが、外部ファイル化したいのですがどのように記述すればよいでしょうか? <a href="1.html"> <img src="menu01.gif" onMouseOver="this.src=\'menu11.gif\'" onMouseOut="this.src=\'menu01.gif\'" height="30" width="138" > </a> <a href="2.html"> <img src="menu02.gif" onMouseOver="this.src=\'menu12.gif\'" onMouseOut="this.src=\'menu02.gif\'" height="30" width="138" > </a>

  • 同一ページ内にスワップイメージを複数セット設置したい

    はじめまして。 カラーミーというショップシステムを使ってネットショップを作っています。 その中で作品ごとに色々な角度で見れるようなギャラリーページのようなものを作っています。 下のサイトと同様な動きです。 http://shailoh.co.jp/pg.html 単一のスワップイメージはできたのですが 同一ページ内に同様の処理を行うスクリプトを複数セット配置する方法がわかりません。 あまり詳しくないので単純にIDを振り分ければいいのかと思っていたのですが 処理がかぶっているせいか動きませんでした。 どなたかお分かりになる方がいたら教えていただきたいです。 ---HTML記述----------------------------------------------------------------- <img src="imgs/01/01.gif" width="480" height="320" id="image"/> <BR><BR> <img src="imgs/01/01_s.gif" width="50" height="50" onmouseover="SwapImage('imgs/01/01.gif');"/> <img src="imgs/01/02_s.gif" width="50" height="50" onmouseover="SwapImage('imgs/01/02.gif');"/> <img src="imgs/01/03_s.gif" width="50" height="50" onmouseover="SwapImage('imgs/01/03.gif');"/> <img src="imgs/01/04_s.gif" width="50" height="50" onmouseover="SwapImage('imgs/01/04.gif');"/> ---Javascript記述----------------------------------------------------------------- // スワップイメージ function SwapImage(img) { obj = document.getElementById("image"); obj.src = img; } // イメージ画像の初期化 function DefaultImage() { obj = document.getElementById("image"); obj.src = '../imgs/01/01.gif'; clearTimeout(timer); } --------------------------------------------------------------------------------- 上記のHTML記述部分を1セットとして複数同じようなものを作りたいのです。 処理は全て同じで、サムネごとにスワップ先を変えることはできないのでしょうか。 カラーミーの仕組み上、フリーで使えるページ数を抑えなくてはいけないので 作品ごとにページを振り分けることができず困っています。 色々調べたのですが分かりませんでした。 どなたかお分かりになる方がいたらアドバイスをお願いいたします。

  • これは相対URLなんですか?

    HTMLを少しかじっている者です。 仕事の関係で、とあるサイトのデータをローカル上に落として、ローカル上で動くようにしているのですが・・・・ サイトのソースを見た所、画像のファイル名のURLの書き方が以下のようになっています。 <img src="/image/gazou.gif"> 私は以下のような書き方しか知らないのですが、 <img src="gazou.gif"> <img src="image/gazou.gif"> <img src="../image/gazou.gif"> <img src="/image/gazou.gif">この書き方も相対パスの書き方なんですか? 本当に、少しだけHTMLをかじっているだけなので、もしかしたら基本的な事なのかも知れませんが、みなさまどうか、教えてください。

    • ベストアンサー
    • HTML
  • a name(id)1回目で飛べない

    HTMLでのホームページ作成についてです。 (カテゴリー違いでこちらに移させていただきました。) 画像ファイルを40枚(01.gif~40.gif)貼り付けたページ「200800.html」を作りました。 画像ファイルの大きさは全て10kb程度です ページの途中の特定の場所にジャンプさせるため、アンカーを埋め込みました。 (アンカーは「name」と「id」を併用しています) <html><body> <img name="01" id="01" src="01.gif"><br> <img name="02" id="02" src="02.gif"><br> … <img name="39" id="39" src="39.gif"><br> <img name="40" id="40" src="40.gif"><br> </body></html> 「200800.html」へのリンクを貼ったページ「index.html」を作りました。 20番の画像へジャンプするように設定しました。 <html><body> <a href="image/200800.html#20">20番の画像</a> </body></html> ところがなぜか1回目のクリックでは20番の画像には飛びません。 (別の画像の中途半端な位置とか、その時によって違います。) 2回目以降はちゃんと飛びます。 どうやらブラウザが「200800.html」を全て読み込むまえに表示してしまうためおかしなところが表示されるようです。 2回目以降は1度読み込んでいるためちゃんと飛ぶようです。 win(IE6)でもmac(safari)でも同様です。 どうか良い解決策をお教えください。よろしくお願いします。

    • ベストアンサー
    • HTML
  • jQueryで表示と非表示の切り替えについて

    趣味の写真ギャラリーサイトの制作を行っており、トップページには以下のようにサムネイルを配置しております。 <nav> <div id="haru">春の画像の表示</div> <div id="natsu">夏の画像の表示</div> <div id="aki">秋の画像の表示</div> <div id="fuyu">冬の画像の表示</div> <div id="jitensya">自転車の画像の表示</div> <div id="umi">海の画像の表示</div> <div id="koibito">恋人の画像の表示</div> <div id="yuki">雪の画像の表示</div> </nav> <div id="content"> <div class="thumb haru"><a href="#"><img src="img/haru.png" alt="春の画像"></a></div> <div class="thumb natsu"><a href="#"><img src="img/natsu.png" alt="夏の画像"></a></div> <div class="thumb aki"><a href="#"><img src="img/aki.png" alt="秋の画像"></a></div> <div class="thumb fuyu"><a href="#"><img src="img/fuyu.png" alt="冬の画像"></a></div> <div class="thumb haru jitensya"><a href="#"><img src="img/haru.png" alt="春と自転車の画像"></a></div> <div class="thumb natsu umi"><a href="#"><img src="img/natsu.png" alt="夏と海の画像"></a></div> <div class="thumb aki koibito"><a href="#"><img src="img/aki.png" alt="秋と恋人の画像"></a></div> <div class="thumb fuyu yuki"><a href="#"><img src="img/fuyu.png" alt="冬と雪の画像"></a></div> </div> とりあえずid="content"内に全画像(サムネイル)を配置(表示)しておき、以下のようなことを行いたいのですが… id="haru" クリック時、class="haru"以外の要素に"display:none;"を追加… id="natsu" クリック時、class"natsu"以外の要素に"display:none;"を追加… id="aki" クリック時、class="aki"以外の要素に"display:none;"を追加… id="fuyu" クリック時、class="fuyu"以外の要素に"display:none;"を追加… id="jitensya"… id="umi"… id="koibito"… id="yuki"… classをタグのように使い、画像の表示と非表示を切り替える上手い手を探しております。jQueryでdisplay:noneを追加したり、toggleを使って元の状態に戻したりすることは可能でしたが、haruクリック後にnatsuをクリックすると期待通りに動きが得られなかったりと、60のおじいちゃんにはお手上げです。 解決法をjQueryの達人にご教授頂ければ幸いです。if文と呼ばれる、showの時にhide、hideの時はshowなど、そういったことが必要な気がしております。どうぞ宜しくお願いいたします。

  • jQueryを使ってある画像を別の画像に置き換えたい。

    jQueryを使ってある画像を別の画像に置き換えたい。 jQueryを使って、<body class="info">の時にだけ <ul id="global-nav">の中の画像「info.gif」を「info_on.gif」に 置き換えるということをしたいです。 <body class="info"> <ul id="global-nav"> <li><img src="info.gif" /></li> <li><img src="about.gif" /></li> </ul> </body> ↓↓↓ <body class="info"> <ul id="global-nav"> <li><img src="info_on.gif" /></li> <li><img src="about.gif" /></li> </ul> </body> どのように記述をしてやるとうまくいきますでしょうか。 色々試しているのですがうまくいきません。 よろしくお願いします。

  • ロールオーバー 外部シート

    お世話になります。 ご質問ですがjavaccriptでロールオーバーメニューを作成したいと思います。 Aの画像からBの画像に入れ替えたいと考えています。 項目は8個ほどです。 img[0] = new Image(); img[1] = new Image(); img[0].src = "menu/pp001_1.gif"; img[1].src = "menu/pp001.gif"; img[2] = new Image(); img[3] = new Image(); img[2].src = "menu/pp002_1.gif"; img[3].src = "menu/pp002.gif"; 上記のような感じなのですが外部シートにするには どうすれば宜しくお願いいたします。 お手数掛けますがお願いいたします。

  • ウィンドウを閉じる

    close.gifというファイル名の画像を押すとそのウィンドウが閉じる様にしたいのですが、現在スワップイメージでclose_s.gifというファイルを設定しています。 ドリームウィーバー4で作成しています。 下がそのスクリプトなのですが、ウィンドウを閉じさせるにはどこに何を記述したら良いのでしょう? <a href="javascriptvoid(0)" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','img/close_s.gif',1)"><img src="img/close.gif" width="110" height="32" border="0" name="Image1"></a>

専門家に質問してみよう