How to Add an HTML Drop Box to an Image for a Blog
- 1). Add the "<form>" and "<form>" tags between the "<body>" and "</body>" tags.
- 2). Insert the "<select>" and "</select>" tags between the "<form>" tags, like so:
<form>
<select>
</select>
</form> - 3). Add the preferred number of menu options to the code. Insert "<option>" between the "<select>" tags, then create a name for the "<select>" tags, as seen below:
<select name="pets">
<option></option>
<option></option>
<option></option>
</select> - 4). Enter a name for each option, along with its value, like so:
<option value="cat">Cat</option>
<option value="dog">Dog</option>
<option value="fish">Fish</option> - 5). Surround the "<select>" tags with "<div>" tags:
<div>
<select name="pets">
<option value="cat">Cat</option>
<option value="dog">Dog</option>
<option value="fish">Fish</option>
</select>
</div> - 6). Add the "top" and "left" attributes to the "<div>" tags:
<div style="top: ; left: ;"> - 7). Enter the appropraiiate numerical values into the "top" and "left" fields to position the HTML drop-box on top of your blog image. For example, entering "top: 20px; left: 300px;" into the "<div>" tag means that the drop-down box is 20 pixels from the top of the page, and 300 pixels to the right. Move the box however many pixels necessary until it's seated on the image. Your code should resemble the following:
<div style="top: 20px; left: 300px;"> - 8). Add JavaScript to the code and change the "value" fields to URLs if you want visitors to your blog to use the drop-down menu as site navigation. You can use the following code:
<form action="../">
<select onchange="window.open(this.options[this.selectedIndex].value,'_top')">
<option value="http://my blog/home">Home</option>
<option value="http://my blog/archives">Archives</option>
<option value="http://my blog/about">About Me</option>
</select>
</form>
