画像の上にDIVを動的に生成する方法

Question

私はいくつかのスキャンされたニュースペーパーを持っており、画像の上にdivを動的に生成したいと思います。ユーザーが特定のDIVをクリックすると、そのニュースの詳細にリダイレクトされます。 どうすれば可能ですか？ イメージの前にAbsouluteの位置付けされたdivを作成する方法の1つです。しかし、私はすべてのスキャン画像のDIVを作成したくない。私はいくつかの動的な方法を探しています。プラス！私はイメージマップを探していません。

例：http://www.express.com.pk/epaper/ これは電子ペーパーで、バックグラウンドで単一のイメージを使用しています。もちろん、彼らは毎日静的なHTMLページを作成していないし、divの位置を再定義する

編集：私の場合、私のソリューションはFacebookのようなタグ付けjQueryプラグインを使用して見つかりました。

Answer 1

1つを絶対的に<div>に配置し、どのイメージにフォーカスしているかを移動します。それに応じてdivのクリック効果を変更します。

Answer 2

あなたはこのように、画像を含むdiv要素を持っています：

<div id="imageDiv"> 
    <img ... /> 
</div> 

そして、あなたはあなたのクリックイベントにIMGの前にdiv要素を作成するためにjqueryのを使用します。残念ながら

$("#imageDiv").prepend("<div>created div before image</div>"); 

Answer 3

、用新聞画像のような可変レイアウト、絶対配置されたdivはおそらくあなたの最善の策です。

この場合、Javascriptは解決するよりも多くの問題を引き起こす可能性があります。達成したいことが必要ではなく、Javascriptを無効にしているユーザーはあなたのサイトを使用できなくなります。

もう1つの可能性は、サーバー側の言語を使用して、画像の上にdivを配置する必要があるxmlファイルを読み取ることです。これにより、コンテンツを変更するためにXML（または同様の）ファイルのみを変更する必要があるため、動的HTMLページが可能になります。

このソリューションに興味がある場合は、例を生成できます。

Answer 4

少し簡単にイメージマップを使用することができます。 Here's a good resource with working examples。