HTML - How To Change The Id Image...

I'm designing a website in html for a college project. I'm having a bit of trouble so hopefully someone here can help me. At the moment I have a white square on the homepage that is a link. I was hoping that when I have visited the page it links to and return to the homepage this square will be a different colour. I don't know if this is even possible but I would appreciate any advice anyone can give me. Thanks

Is it possible, and if so - how do I change color of an image using html.
For example:
HTML Code:

<img src="http://i41.tinypic.com/30x7r49.png" border="0" color="blue />

But that doesn't work. I searched Google and found nothing.
Any Solutions?

Thank you in advance.

Ok, so i have an image that's 2 x 1 and the div I'm placing it in is 1 x 1. (easy math example) My website is showing the top half of the image, which is what i want it to do. I would like it to show the bottom half of the image when i put my mouse over it. How do i do this? (It's a blue button that changes yellow) So basically how do i change the image position in that div?
Thanks

I'd like to improve the appearance of three buttons on an html page. i believe this is the code:

Code:

<input type="submit" name="purchase" value="Use Remaining Credits" style="margin:7px 0" style="padding:1px 2px 1px 2px" rel="gb_page_center[600, 635] ">
<input type="button" name="search" value="Get New Credits" onclick="window.location.href='newcredits.php';" style="margin:7px 0" style="padding:1px 2px 1px 2px">
<input type="button" name="search" value="Search Again Now" onclick="window.location.href='page.php??page=12';" style="margin:7px 0" style="padding:1px 2px 1px 2px">

How can I add more attractive buttons, which would include the text "Use Remaining Credits", etc.? can you please provide a code example, with image code?
Thanks

hi guys. i want to change the background image of a div when the user selects a football team from a dropdown select box. here's my code:

Code:

	function changeDivImageArsenal()
    {
        var imgPath = new String();
        imgPath = document.getElementById("right_box").style.backgroundImage;
        
        if(imgPath == "url(images/blackburn.jpg)" || imgPath == "")
        {
            document.getElementById("right_box").style.backgroundImage = "url(images/arsenal.jpg)";
        }
        
    }
	
		function changeDivImageBlackburn()
    {
        var imgPath = new String();
        imgPath = document.getElementById("right_box").style.backgroundImage;
        
        if(imgPath == "url(images/arsenal.jpg)" || imgPath == "")
        {
            document.getElementById("right_box").style.backgroundImage = "url(images/blackburn.jpg)";
        }
        
    }

thats fine and works if i just have 2 different images. but if i want to have 20 different selections, what do i write in the 'if' statement? thanks in advance

Right now i'm trying to make it so that an image is on my webpage, and when someone rolls their mouse over it, it changes to another image. It's a simple image conversion, all I changed is the arrow's depth.

Thanks!
Help-my-HTML

I understand Java on a primitive level.
I am building a restaurant website;
http://www.mypitagrill.com/test/

I have gotten the top 4 menu buttons to change the designated image on the right-side stage.

Problem #1: When you scroll down just a bit, then click one of these top 4 menu buttons, it automatically refreshes to back to the top of the page. Although, I would like for the image to change without this refresh that is scrolling the page back to the top. -- Which I believe is the result of my second problem.

Problem #2: If I click another remaining menu button that links me to another page entirely (such as; specials.htm, order.htm, location.htm), then click back to the 3 of 4 remaining top menu butons (such as; platters, appetizers, kinds menu), ...it does not bring me to the respective menu image, rather is automatically brings me to the default top image "Pita Sandwiches". I believe this is related to the "Auto Refresh" mentioned in Problem #1. -- You may even notice that I even tried incorporating webpage Anchors, to return to the respective image, but that didn't do the trick.

Can anyone suggest what might be refreshing the page back to the top?
Or does anyone have a similar Java script that I could try to avoid this exisiting problem?

PS, thank God for websites like this, and for people like you that take the time to help others! It has saved my

A** on several occasion!

Best Regards-

Hi, I'm trying to do an image changer that when you click on a link, an image changes. I have the image change working, but I want a link to the full-size image below to also change.

I tried several things, but what makes the most sense to me is to have a function change the link, so I used the script I got for the image change and tweaked it so it would change the link.....it's not working.

I've been trying very hard, but I'm not very good at javascript, so if someone could help, that would be wonderful!

The page is he http://sc-lee.com/newlay/ac.html
And the code in question is he

Code:

<head>
<script>
function changeImage(filename)
{
   document.mainimage.src = filename;
}

***ntion changeText(linkadd)
{
   document.link.href = linkadd;
}
</script>
</head>

<body>
<br><bR><a href="javascript:changeImage('studio/ac-1s.jpg'),changeText(ac-1.jpg);">perspective moving into court</a> 
<br><a href="javascript:changeImage('studio/ac-3s.jpg'),changeText(ac-3.jpg)">perspective moving into court2</a> 
<br><a href="javascript:changeImage('studio/ac-6s.jpg'),changeText(ac-6.jpg)">exterior perspective of complex</a> 

<BR /><BR />
<img name="mainimage" src="studio/ac-1s.jpg">
<br /><a href="ac-1.jpg" target="_blank" name="linkadd">fullsize</a>
</body>

</body>
</html>

Everything is working expect the list such as Happy Birthday Card etc should display image on another place when selected an item. Look at my java code (red). It is not working.


<head>
<style>
body {
margin: 20px;
}

select {
float: left;
}

optgroup {
text-indent: 5px;
}

option {
padding: 0 10px 0 15px;
}

table {
border-spacing: 20px 2px;
}

th {
text-align: left;
text-decoration: underline;
}

td:last-child {
text-align: right;
}
</style>
<script>
window.onload = function() {
document.getElementById("dlist1").onchange = function() {
var option = this.options[this.selectedIndex];
document.getElementById("price_card").innerHTML = option.getAttribute("data-card") ? option.getAttribute("data-card") : "";
document.getElementById("price_memo").innerHTML = option.getAttribute("data-memo") ? option.getAttribute("data-memo") : "";
document.getElementById("price_tags1").innerHTML = option.getAttribute("data-tags1") ? option.getAttribute("data-tags1") : "";
document.getElementById("price_tags4").innerHTML = option.getAttribute("data-tags4") ? option.getAttribute("data-tags4") : "";
document.getElementById("price_key").innerHTML = option.getAttribute("data-key") ? option.getAttribute("data-key") : "";
document.getElementById("price_fridge").innerHTML = option.getAttribute("data-fridge") ? option.getAttribute("data-fridge") : "";
}
}


</script>

<script type="text/javascript">
function swapImage1() {
var image = document.getElementById("imageToSwap1");
var dropd = document.getElementById("dlist1");
image.src = dropd.value;
};

</script>

</head>

<body>


<select name="ORDER1" size="12" multiple="multiple" id="dlist1" onchange="swapImage1() ">
<optgroup label="Sow Seeds of Love">
<option value="None">None</option>
<option data-card="32.00" data-memo="62.00" data-tags1="8.50" data-tags4="1.80" data-key="30.00" data-fridge="40.00" value="Images/photo1.jpg">Happy Birthday Card</option>
<option data-card="35.00" data-memo="65.00" data-tags1="9.50" data-tags4="1.80" data-key="20.00" data-fridge="40.00" value="Images/photo2.jpg">Get well soon Card</option>
<option data-card="1.00" data-memo="2.00" data-tags1="3.00" data-tags4="4.00" data-key="5.00" data-fridge="6.00" value="Images/photo3.jpg">Wedding Card</option>
<option data-card="6.00" data-memo="5.00" data-tags1="4.00" data-tags4="3.00" data-key="2.00" data-fridge="1.00" value="Images/photo4.jpg">New Baby Card</option>
<option data-card="21.00" data-memo="22.00" data-tags1="23.00" data-tags4="24.00" data-key="25.00" data-fridge="26.00" value="Images/photo1.jpg">Thank you Card</option>
</optgroup>
</select>

<table width="700">

<tr>
<td>
<img class="ImageToSwap" id="imageToSwap1" src="Images/Card.jpg" width="147" height="207" />

</td>
</tr>
</table>
<table>
<tr>
<th>Description</th>
<th>Price</th>
</tr>
<tr>
<td><label><input type="radio" name="medium" value="card" /> Card A6 (blank)</label></td>
<td id="price_card"></td>
</tr>
<tr>
<td><label><input type="radio" name="medium" value="memo" /> Memo Book A6</label></td>
<td id="price_memo"></td>
</tr>
<tr>
<td><label><input type="radio" name="medium" value="tags4" /> Gift Tags (4 designs per packet)</label></td>
<td id="price_tags4"></td>
</tr>
<tr>
<td><label><input type="radio" name="medium" value="tags1" /> Gift Tags - Single - Assorted</label></td>
<td id="price_tags1"></td>
</tr>
<tr>
<td><label><input type="radio" name="medium" value="key" /> Key Rings Perspex</label></td>
<td id="price_key"></td>
</tr>
<tr>
<td><label><input type="radio" name="medium" value="fridge" /> Fridge Art</label></td>
<td id="price_fridge"></td>
</tr>
</table>
</body>
</html>

Hello, I am not familiar with coding of any sort, so if someone could just paste the appropriate code for my needs, it would be a lifesaver! And then I could just edit to fit my context...

I want a selection form using what you all refer to all "radio options". However, when someone clicks on an option, I want an image off to the side of the option to change. So each selection would have a different image to appear.

Is there any type of general code anyone could paste that would do that and I could just edit the image location and options, etc?

Thank you all for all your help and time!

Okay. I'm trying to make it so when you mouseover a players "avatar" the border color changes from grey to red.

The following code works PERFECT in IE, but FF, the border doesn't show up at all.

CSS Coding:

Code:

   img.avatar {
    border-color : #CCCCCC;
    border : 1px
   }
   img.avatar:hover {
    border-color : #ff0000;
    border : 1px
    }   
   img.avatar:visited {
    border-color : #CCCCCC;
    border : 1px
   }
   img.avatar:hover {
    border-color : #ff0000;
    border : 1px
    }

HTML Coding:

Code:

<TD align=middle width=104>
<DIV align=center><A href="Link"><IMG class=avatar height=75 alt="" src="Image URL" width=75></A></DIV></TD>

Hi,
i didnt know where to put this because I've got a problem with the CSS too.

All the tutorials ive seen on the net require a "ordered/unordered list" to make a css menu.

my site is a lot of images put together using divs, and then each relevant part included in a php file called index.php

now i would like to have a menu button changed with a button with a tick on it when clicked to show the active state.
here is my html with all the images put in order, the four menu button are in there

home, events, donations, bhajans
HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<link rel="stylesheet" href="styles.css" type="text/css">
<title>|Youth Seva Group|</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

</head>
<body style="background-color:#FFFFFF;">

<div id="container">

	<div id="sideLeft_">
		<img id="sideLeft" src="images/sideLeft.jpg" width="79" height="768" alt="sideleft" />
	</div>
	<div id="krishna_">
		<img id="krishna" src="images/krishna.jpg" width="155" height="227" alt="Krishna" />
	</div>
	<div id="logo_">
		<img id="logo" src="images/logo.jpg" width="597" height="138" alt="Logo" />
    </div>
	<div id="hanuman_">
		<img id="hanuman" src="images/hanuman.jpg" width="175" height="227" alt="Hanuman" />
	</div>
	<div id="sideRight_">
		<img id="sideRight" src="images/sideRight.jpg" width="79" height="768" alt="sideright" />
	</div>
	<div id="ysg-06_">
		<img id="ysg_06" src="images/ysg_06.gif" width="1" height="768" alt="" />
	</div>
	<div id="saiBaba_">
		<img id="saiBaba" src="images/saiBaba.jpg" width="78" height="89" alt="SaiBaba" />
	</div>
	
    <div id="home1">
		<a href="index.php"><img class="current-home" id="home1" src="images/home_off.gif" alt="Home"/> </a>
	</div>
	
    <div id="om_">
		<img id="om" src="images/om.jpg" width="131" height="76" alt="Om" />
    </div>
	<div id="ysg-10_">
		<img id="ysg_10" src="images/ysg_10.gif" width="1" height="76" alt="" />
    </div>
	
    <div id="donations_">
		<a href="donations.php"><img id="donations" src="images/donations.gif" width="151" height="25" alt="Donations" /></a>
	</div>
	
    <div id="ysg-12_">
		<img id="ysg_12" src="images/ysg_12.gif" width="85" height="89" alt="" />
	</div>
    
	<div id="events1">
		<a href="events.php"><img id="events1" src="images/events_off.gif" width="151" height="22" alt="Events" /> </a>
    </div>
	
    <div id="bhajans_">
		<a href="bhajans.php"><img id="bhajans" src="images/bhajans.gif" width="151" height="22" alt="Bhajans" /></a>
    </div>
	
    <div id="ysg-15_">
		<img id="ysg_15" src="images/ysg_15.gif" width="151" height="29" alt="" />
	</div>
	<div id="ysg-16_">
		<img id="ysg_16" src="images/ysg_16.gif" width="151" height="29" alt="" />
	</div>
	<div id="ysg-17_">
		<img id="ysg_17" src="images/ysg_17.gif" width="6" height="13" alt="" />
	</div>
	<div id="ysg-20_">
		<img id="ysg_20" src="images/ysg_20.gif" width="6" height="13" alt="" />
	</div>
	<div id="lineLeft_">
		<img id="lineLeft" src="images/lineLeft.gif" width="239" height="5" alt="Line Left" />
	</div>
	<div id="lineRight_">
		<img id="lineRight" src="images/lineRight.gif" width="266" height="5" alt="Line Right" />
	</div>
</body>
</html>

this is my css

Code:

#container {
	position: relative;
	text-align: center;
	width: 1068px;
	height: 0px;
	margin: 0px auto;
}

#sideLeft_ {
	position:absolute;
	left:0px;
	top:0px;
	width:79px;
	height:768px;
}

#krishna_ {
	position:absolute;
	left:79px;
	top:0px;
	width:155px;
	height:227px;
}

#logo_ {
	position:absolute;
	left:234px;
	top:0px;
	width:597px;
	height:138px;
}

#hanuman_ {
	position:absolute;
	left:831px;
	top:0px;
	width:175px;
	height:227px;
}

#sideRight_ {
	position:absolute;
	left:1006px;
	top:0px;
	width:79px;
	height:768px;
}

#ysg-06_ {
	position:absolute;
	left:1085px;
	top:0px;
	width:1px;
	height:768px;
}

#saiBaba_ {
	position:absolute;
	left:234px;
	top:138px;
	width:78px;
	height:89px;
}

#home1 a:active, .current-home {	
	position:absolute;
	left:312px;
	top:138px;
	width:151px;
	height:25px;
	background-position: top;
	background:url(home_on.gif);
}

#events1 a {
	position:absolute;
	left:312px;
	top:163px;
	width:151px;
	height:22px;
	background-position: top;
}




#om_ {
	position:absolute;
	left:463px;
	top:138px;
	width:131px;
	height:76px;
}

#ysg-10_ {
	position:absolute;
	left:594px;
	top:138px;
	width:1px;
	height:76px;
}

#donations_ {
	position:absolute;
	left:595px;
	top:138px;
	width:151px;
	height:25px;
}

#ysg-12_ {
	position:absolute;
	left:746px;
	top:138px;
	width:85px;
	height:89px;
}

#bhajans_ {
	position:absolute;
	left:595px;
	top:163px;
	width:151px;
	height:22px;
}

#ysg-15_ {
	position:absolute;
	left:312px;
	top:185px;
	width:151px;
	height:29px;
}

#ysg-16_ {
	position:absolute;
	left:595px;
	top:185px;
	width:151px;
	height:29px;
}

#ysg-17_ {
	position:absolute;
	left:312px;
	top:214px;
	width:6px;
	height:13px;
}

#aboutus_ {
	position:absolute;
	left:318px;
	top:214px;
	width:211px;
	height:24px;
}

#resposibilities_ {
	position:absolute;
	left:529px;
	top:214px;
	width:211px;
	height:24px;
}

#ysg-20_ {
	position:absolute;
	left:740px;
	top:214px;
	width:6px;
	height:13px;
}

#lineLeft_ {
	position:absolute;
	left:79px;
	top:227px;
	width:239px;
	height:5px;
}

#lineRight_ {
	position:absolute;
	left:740px;
	top:227px;
	width:266px;
	height:5px;
}

#logIn_ {
	position:absolute;
	left:79px;
	top:232px;
	width:111px;
	height:33px;
}

#register_ {
	position:absolute;
	left:190px;
	top:232px;
	width:112px;
	height:33px;
}

#ysg-25_ {
	position:absolute;
	left:302px;
	top:232px;
	width:16px;
	height:27px;
}

#ysg-26_ {
	position:absolute;
	left:740px;
	top:232px;
	width:266px;
	height:49px;
}

#ysg-27_ {
	position:absolute;
	left:318px;
	top:238px;
	width:422px;
	height:21px;
}

#ysg-28_ {
	position:absolute;
	left:302px;
	top:259px;
	width:10px;
	height:22px;
}

#sayings_ {
	position:absolute;
	left:312px;
	top:259px;
	width:76px;
	height:22px;
}

#ysg-30_ {
	position:absolute;
	left:388px;
	top:259px;
	width:352px;
	height:22px;
}

#ysg-31_ {
	position:absolute;
	left:79px;
	top:265px;
	width:48px;
	height:16px;
}

#memberBenefits_ {
	position:absolute;
	left:127px;
	top:265px;
	width:114px;
	height:11px;
}

#ysg-33_ {
	position:absolute;
	left:241px;
	top:265px;
	width:61px;
	height:16px;
}

#ysg-34_ {
	position:absolute;
	left:127px;
	top:276px;
	width:114px;
	height:5px;
}

#content_ {
	position:absolute;
	left:79px;
	top:281px;
	width:927px;
	height:487px;
}
a:active
{
outline: none;
}

a:focus
{
-moz-outline-style: none;
}

img{

border:0px;
}

and this is the main php file with the includes.

PHP Code:
<?php include 'headerplusmenu.php'; ?>
<?php include 'login.php'; ?>
<?php include 'sayings.php'; ?>
<?php include 'main.php'; ?>
<?php include 'homesubmenu.php'; ?>



<div id="content_">
<p>Homepage</p></div>

hi there. i made a website for somebody years ago when i knew nothing about html. the code is absolutely crazily bad and i am looking to revamp it.
the site is www.englishandproudofit.co.uk

i know how to do the layout but its the buttons i am struggling with.
what is the best way to make the buttons around the outside?
i only want to use one image for all of the buttons and then have text on each button that also chnages colour on hover, pretty much how it is now but what would be the correct way to do it?
all help greatly appreciated. thank you, sam