Advertise Here

Author Topic: drop down menu for changing images  (Read 1347 times)

0 Members and 1 Guest are viewing this topic.

Offline MR.SATAN

  • SMF For Free Member
  • *
  • Posts: 61
    • View Profile
    • Twisted-Sanity

  • Total Badges: 14
    Badges: (View All)
    Topic Starter Combination Level 3 Level 2 Level 1
drop down menu for changing images
« on: August 08, 2008, 05:32:01 pm »
I need a drop down menu for changing images that will work with the portal, i have tried the following but it distorted the sizes of all the other images, please help.

Code: [Select]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
img{
height:200px;
width:250px;
display:block;
margin-top:10px;
}
#caption{
font-family:Verdana,tahoma,arial;
font-size:10pt;
text-align:center;
display:block;
width:250px;
}
</style>
<script type="text/javascript">
/************************************************************
* Script by : Raymond Angana
* Title: Dropdown Based Picture w/ Captions
* First seen in CodingForums.com
* rangana in codingforums.com
* Created June 5, 2008
* This notice must stay intact
/**********************************************************/
window.onload=function()
{
var caption=['Default Image Caption',
'Caption1',
'Caption2',
'Caption3',
'Caption4',
'Caption5',
'Caption6',
'Caption7',
'Caption8',
'Caption9'], // This will be your images caption
bp='http://h1.ripway.com/rangana/images/', //base url of your images
imgnum=14, //Number of your images. This should match on your comboboxes options.
thumb=document.getElementById('thumb'), //id of your image that will be changing
description=document.getElementById('caption'), //id of your caption
combobox=document.getElementById('selection'); // id of your combobox.

combobox.onchange=function()
{
thumb.src=bp+'Picture'+this.value+'.jpg';
description.innerHTML=caption[this.value];
}
}
</script>
</head>
<body>
<label>Please Change the default picture: </label>
<select id="selection">
<option>Change Picture</option>
<option value="1">Image 1</option>
<option value="2">Image 2</option>
<option value="3">Image 3</option>
<option value="4">Image 4</option>
<option value="5">Image 5</option>
<option value="6">Image 6</option>
<option value="7">Image 7</option>
<option value="8">Image 8</option>
<option value="9">Image 9</option>
</select>
<br>
<img src="http://h1.ripway.com/rangana/images/Picture1.png" alt="mypic" id="thumb">
<span id="caption">Caption for the default Image</span>
</body>
</html>



Offline Kalphiter

  • SMF For Free Full Member
  • *
  • Posts: 135
  • DE30AC #409
    • View Profile

  • Total Badges: 14
    Badges: (View All)
    Topic Starter Combination Level 3 Level 2 Level 1
Re: drop down menu for changing images
« Reply #1 on: August 18, 2008, 10:51:29 am »
Suggestion:

Put the <style> stuffz in styles -> select current style if you know -> go to bottom, add CSS there, but not the "style" stuff.

Offline MR.SATAN

  • SMF For Free Member
  • *
  • Posts: 61
    • View Profile
    • Twisted-Sanity

  • Total Badges: 14
    Badges: (View All)
    Topic Starter Combination Level 3 Level 2 Level 1
Re: drop down menu for changing images
« Reply #2 on: August 18, 2008, 05:57:30 pm »
i wasn't after something to change the style, i wanted a way to navigate a web comic i'm making



 

Related Topics

  Subject / Started by Replies Last post
2 Replies
960 Views
Last post November 30, 2007, 12:14:10 am
by Kiwigold
3 Replies
1158 Views
Last post February 03, 2008, 01:43:03 pm
by Photoshop Jr
0 Replies
1318 Views
Last post May 16, 2008, 08:27:26 pm
by clairebear
1 Replies
1863 Views
Last post December 17, 2011, 04:19:32 pm
by SMF For Free
3 Replies
1146 Views
Last post January 28, 2013, 07:13:28 pm
by SMF For Free