I am trying to add a border around the base they select and then when they select another one, I want the previous one to go away and then high light that one.This is my PHP code that outputs the bases:
$gender = $_GET['gender'];
// SQL Injection here?
$sql = "SELECT * FROM habases WHERE gender='".$gender."'";
[code]....
I am making a website and I have image rotation written in javascript and atm I am trying to change the boarder around my image rotation because right now the boarder is purple but nothing I do seams to work so. Here is my code
<a href="Page2.html"><img id="r1" src="images/Pro-Tech Antivirus Cover.jpg" alt="" border="5"></a>
Its all defined and everything I just need to no how to change the border so its not purple. I want it to be dark cyan?
What I want to do is change the border of several images on the page to show a 4px border. There are many images on the page so I just want to call the changeborder() function on the onClick event so as the image that has been clicked changes. However, I don't think using this.style.border to identify the element works when placed within the function. That is, how do I identify, from the function, which image has been clicked? My current code (which does not work) looks like this but I am sure its possible to gather what i'm trying to achieve:
<script type="text/javascript">
function changeborder()
{
this.style.border='4px solid red'
}
</script>
<img style="border: 1px solid #F4F4F4;" onclick="changeborder()" src="images/colours/010.jpg" border="0">
I am using ContentFlow from [URL] It is very well documented on their website. I got the whole thing working great on my site. What I don't know is how to change the ActiveItem onclick to just bump it over to the next image as if the next image had been clicked. As of right now it opens the image source in a self window. I don't want that. Can anyone give me a clue or maybe the whole answer on how to get it to click over to the next image? I believe the answer lies in the contentflow_src.js file.
View 6 Replies View RelatedI have this javascript code which I'm using for collapsible tables:
<html>
<head>
<script type="text/javascript">
function getItem(id)
[Code]....
So what I'm trying to do is display the image /path/to/plus when the table is closed, and then display the image /path/to/minus when the table is open.
I am trying to change up0.gif to up1.gif when a user clicks the "Click Me" button, but I am not bieng successful. Here is what I have so far:
View 2 Replies View Related<img id="who" class="who" src="who.jpg" alt="Warriors Chosen For Battle" title="Warriors Chosen For Battle">
<img id="chosen" class="selector" src="selector.jpg" alt="Click for next image"
[Code]....
Yeah so basically when I click on one of the selector images I want it to change the value "who" images src value. I'm making an image selector, it works fine in IE, but every other browser it refuses to do anything.
i have a drop down menu called DDvehAttr
there are 7 values in this drop down (which is preloaded via backend) and the values are 1-7.
when the user clicks on an image i would like to alter the selected value in the DDvehAttr drop down with an onclick event.
there are 7 images in total and i would hope to do something like the following:
Code:
<img value="choice1" onclick="changevalue()" />
<img value="choice2" onclick="changevalue()" />
<script>
Function changevalue()
[Code]....
Let's say I have three images - one large image and two small thumbnails like so.
<p>
<img src="1_large.jpg" width="200" height="200" />
</p>
<p>
<img src="1_small.jpg" width="100" height="100" style="padding:0 5px;" />
<img src="2_small.jpg" width="100" height="100" />
</p>
Now, what I'm trying to achieve is: When you hover over the 2_small.jpg the 1_large.jpg temporarily changes to '2_large.jpg' until you mouseout then the image reverts back to '1_large.jpg'. If you click on the '2_small.jpg' thumbnail the '1_large.jpg' permanently changes to the '2_large.jpg' until you either hover/click on the '1_small.jpg' thumbnail.
I want to use the onclick event to change an image to text. I'm working on a directory type website and want users to have to click on the image of a telephone in order to reveal the telephone number they are looking for. how do i do this? Also is there a way of tracking how many clicks each person gets?
View 1 Replies View Related*peeks into the ol' coding forum n' sooo glad its still just a here? the scenerio... there are four 'thumbs' in row 1...thumb1 thumb2 thumb3 and thumb4 there is one just a large? image in row 2 that changes when the respective thumb is clicked from row 1...AND @ the same time??? the thumb that was clicked just a changes? too... so now when the viewer just a clicks? thumb2....the big picture should change to BIG 2...the thumb1 should go back to its 'off' state n' thumb2 should be in its 'on' state...
/me found just a script? that does it for two thumbs...aka they change back when one or the other is click...BUTTT.../me cant just a copy? the script changing values to make it work when thumbs 3 and 4 are added into the mix...:O((( heres what /me has so far...
[Code].....
I know it's been addressed before but I don't understand how to implement it on my code.
I want the content on the div 'text' to change every time a new picture loads on the image array. So the first picture would trigger 'THIS IS IMAGE 1' on the 'text' div, while the second image would display 'THIS IS IMAGE 2' and so on.
Here is my code,
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>
[Code]....
I am using the following function in order to change an image opacity on a mouseover and mouseout. This function works fine but does not handle a onClick. What I mean by this is...... How can I create/alter the function to handle an onclick? I want to be able to click on an image (one of many) and have that image opacity change to 50%. There are other similar images whose opacity would need to remain at 100%. If one of those are clicked, that images opacity would then change, and the previous would restore to original value of 100% I thought about passing the clicked images id to the function but I can't find a way to compare an image id VS a passed image id.
[Code]...
I need to set the border width of a link when it is clicked. The link calls a javascript and so I need a way to identify which link has been clicked, hence the outline...i tried this.style.borderWidth = 'thin';but to no avail...?!I have already assigned border-color and border-style in the style sheet if that makes any difference...
View 1 Replies View RelatedI am working on creating a simple image gallery. I have added styling around the thumbnail images (border and padding). I would like to change the border color when the item is hovered over. I know this can be done rather easily with the getElementById command. Can someone help me understand this process? Here's a snippet of the list that I am working with...
Here's the CSS:
ul {
padding:0;
margin:0;
position:relative;
}
li {
float:left;
padding:0 .5em .3em .5em;
list-style:none;
}
#gallery {
list-style:none;
}
#gallery li {
display:inline;
}
#gallery li a img {
border:1px solid #ccc;
padding:3px;
}
Here's the HTML:
<ul id="gallery">
<li><a href="path/to/image/large/" title="title/of/image/"><img src="path/to/image/thumb/" alt="title/of/image/" /></a></li>
<li><a href="path/to/image/large/" title="title/of/image/"><img src="path/to/image/thumb/" alt="title/of/image/" /></a></li>
<li><a href="path/to/image/large/" title="title/of/image/"><img src="path/to/image/thumb/" alt="title/of/image/" /></a></li>
</ul>
I would like to change the border color from #ccc to #3455ef when the item is hovered over, and ideally have a different style when the item is clicked (or active).
See the table code below. Because this table is created by a third party application, I can't modify their code. So, I'm stuck trying to find other ways to change the table styles. I figured jQuery would be a great way to accomplish this, but I can't figure out the correct code. Can someone show me how to change all cells, or certain cells (dddefault and ddlabel) to have a border? I've gotten close, but it only affects the first cell.
<TABLE CLASS="datadisplaytable" SUMMARY="This layout table is used to present the weekly course schedule." WIDTH="80%">
<TR>
<TH CLASS="ddheader" scope="col" > </TH>
<TH CLASS="ddheader" scope="col" > Monday </TH>
[code]....
sing Javascript, on mouseover/hover, I would like to change the boder color of my textbox from
rgb(142, 142, 142) to black: rgb(0, 0, 0,) then when I move the mouse pointer off the textbox, I would like it to change from black back to rgb(142, 142, 142).I can't figure out where to start or how to get this going.
Below you will find my code for a web program that takes in changes and will change the last area. I am wondering if i need to make the last box a textarea? Also any help with the javascript will be greatly appreciated and any other ways to make it better will be also.
<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
[code]....
When I use this code....
window.open('gallery/pic1.jpg','windowname','width=775,height=550,resiz able=yes,scrollbars=yes,top=10,left=10');
....my web page displays a picture with a white border around it. Is there a
way to get rid of the white border? I want to continue to link directly to
my image (pic1.jpg) and not to an HTML page. The reason for this is because
if I link directly to an HTML page then I seem to have problems with pop-up
blockers.
am beginner in javascript. I am attempting to change border color and style of a asp.net text box using javascript. The function is inside a .js file. It is as follows.
function checkMoney(controlID)
{
var control = document.getElementById(controlID);
[code]....
Can someone point me to some resources on how to tile an image to create a
border?
<td><img src="images/MTile.png" width="1" height="30" alt=""></td>
I have something like that where I need to repeat x times where x depends on
the width of the browser. (Not sure if its a good idea to use a bitmap of
width 1 but I could use one that is larger and then use both(e.g., maybe one
that is 10 pixels wide and repeat that as needed and let the 1 pixel wide
one get the rest(I have some "ends" on the border that I need to display too
so it sorta needs to be exact))
Not sure how to do this with js(just learning it) but obviously I just need
to get the width of the border and then figure out how many times I need to
repeat the code.
I have several issues I am wondering about though. First off is that I have
used photoshop imageready to create a roll over menu bar but in firefox when
I use the down state it leaves a selection rectangle around the image but in
IE it does not do this. It does not look nice in firefox and I'm sure there
is some way to prevent it. (for some reason it selects it when you click the
menu item and this probably can be turned off using css?)
Another issue, which isn't a big deal, is that I'm using symmetric bitmaps
to "cap" the border. I was wondering if it is possible to flip the image
using html or js so that I don't have to have a seperate image for it?
Below is the routine I am using that when invoked swaps images for other images:
<script>
function swapImage(swapContName) {
if (swapContName == 'mainImage1') {
[code]....
But one of the images I would like to vanish (using the empty spacer.gif) has a border:
<img id="instructflag" border="1" src="FLAG.gif" width="23" height="15" align="left">
It must have this black border, but when it gets swapped for a blank, I am left with the black square. how to vanish the border along with the graphic?(I have some vague idea that "border" is not used any more, but anyway...).
is there a way how to detect if mouse is over the border table and over cell border? and if yes, when user click and host button and move mouse cursor (to increase cell width) which event should i detect ?
View 1 Replies View RelatedI'm creating a tabbed menu navigation for a site. I'm using javascript to to give the tabs a mouseover effect. I also have a function that decides whether the tab has been selected or deselected by the user, and uses that info to determine which image file to use in the img swap.
The page works fine in IE 6, however in Netscape 6.2, when I mouseover the tabs, a thin border quickly flashes around each image as it swaps. It looks like the placeholder that's displayed for a broken image in IE, only with only the border and no red "x". I'm not sure why this is happening, as all the images have been preloaded.
The markup is XHTML 1.0 Transitional. Here's the js I'm using:
I have say 12 pics on a page, in 3 rows of 4. The rows of pics are there so that a choice can be made from each row and I'm using a function <script>
var highlight_color = '#FF0033'; function toggle_highlight(id) { var images = document.getElementsByTagName('img'); for (var i = 0; i < images.length; i++) { var image = images[i]; image.style.borderColor = image.id == id ? highlight_color : 'white'; } } </script>
to toggle a border colour change so that you can see what was chosen from each row. The function I have used is fine in that it works, but I can only choose one picture and have the border changed, then if I click on another row the first border that changed obviously changes back and the new selection is highlighted. I don't really know where to go from here.
I want to make it so that when I click on something, it changes what document.onclick does.
This is a simplified version of what I'm trying to do:
Code:
<div id="clickme" onclick="document.onclick = function(){ alert ('This should not be alerted on the first click'); }">Click here</div>
However, as you'll notice, the alert box shows up on the first click as well. The only way I have been able to get around this behaviour is to have the first onclick execute a timer that will then set the document.onclick after 1ms, however this seems very messy to me.
