Rollover Images/ActiveX

Discussion in 'HTML & Website Design' started by PMedia, Feb 1, 2008.

  1. #1
    I used the rollover image in dreamweaver cs3. Works fine, but everytime I launch the site it asks to allow blocked content in the activex control. Ive seen sites that have rollovers and do not ask this. I dont want the user to have to unblock it everytime they load the webpage.

    Anyway around this?

    Thanks.
     
    PMedia, Feb 1, 2008 IP
  2. blueparukia

    blueparukia Well-Known Member

    Messages:
    1,564
    Likes Received:
    71
    Best Answers:
    7
    Trophy Points:
    160
    #2
    Don't use the Dreamweaver rollovers, in fact, don't use Javascript at all for rollovers.

    This is your HTML code (link):

    
    <a href="#" id="rollover1"></a>
    
    Code (markup):
    Create a new CSS file, and in it put:

    
    #rollover1
    {
    height:100px; //Change this to however high you want it
    width:150px; //Change this to however high you want it
    display:block;
    background-image:url(path/to/image.png);
    }
    
    #rollover1:hover
    {
    background-image:url(path/to/image2.png);
    }
    
    Code (markup):
    Then just attach that CSS file to your HTML document using Dreamweaver.

    This works in Opera, Firefox, Safari (for windows), Internet Explorer 6 and Internet Explorer 7.
     
    blueparukia, Feb 1, 2008 IP
    gemini181 likes this.
  3. PMedia

    PMedia Peon

    Messages:
    270
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    How would the code look if the starting link and rollover link were images?
     
    PMedia, Feb 1, 2008 IP
  4. blueparukia

    blueparukia Well-Known Member

    Messages:
    1,564
    Likes Received:
    71
    Best Answers:
    7
    Trophy Points:
    160
    #4
    
    <a href="#" id="rollover1"></a>
    Code (markup):
    That is your image (both rollover and starting). You use the CSS to change the width, height and image urls.

    If you want to use multiple rollovers, just change the ID:

    
    <a href="#" id="rollover1"></a>
    <a href="#" id="rollover2"></a>
    <a href="#" id="rollover3"></a>
    
    Code (markup):
     
    blueparukia, Feb 1, 2008 IP
  5. PMedia

    PMedia Peon

    Messages:
    270
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Thanks. How do I attached the css file to my original file?
     
    PMedia, Feb 1, 2008 IP
  6. blueparukia

    blueparukia Well-Known Member

    Messages:
    1,564
    Likes Received:
    71
    Best Answers:
    7
    Trophy Points:
    160
    #6
    Between your <head> and </head> add:

    
    <link rel="stylesheet" type="text/css" media="screen,projection" href="path/to/file.css" />
    
    Code (markup):
     
    blueparukia, Feb 1, 2008 IP
  7. gemini181

    gemini181 Well-Known Member

    Messages:
    2,883
    Likes Received:
    134
    Best Answers:
    0
    Trophy Points:
    155
    #7
    Thanks, for that code, I've had the same issue with ActiveX and IE.
     
    gemini181, Feb 1, 2008 IP
  8. blueparukia

    blueparukia Well-Known Member

    Messages:
    1,564
    Likes Received:
    71
    Best Answers:
    7
    Trophy Points:
    160
    #8
    Yeah well, that is what CSS is for. Their is always an incredible longshot that Adobe may introduce it in CS4.
     
    blueparukia, Feb 1, 2008 IP
  9. PMedia

    PMedia Peon

    Messages:
    270
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #9
    #rollover1
    {
    height:146px; //Change this to however high you want it
    width:38px; //Change this to however high you want it
    display:block;
    background-image:url(index_05.jpg);
    }
    
    #rollover1:hover
    {
    background-image:url(rollover1.jpg);
    }
    
    #rollover2
    {
    height:180px; //Change this to however high you want it
    width:38px; //Change this to however high you want it
    display:block;
    background-image:url(index_06.jpg);
    }
    
    #rollover1:hover
    {
    background-image:url(rollover2.jpg);
    }
    
    #rollover3
    {
    height:138px; //Change this to however high you want it
    width:38px; //Change this to however high you want it
    display:block;
    background-image:url(index_07.jpg);
    }
    
    #rollover1:hover
    {
    background-image:url(rollover3.jpg);
    }
    
    #rollover4
    {
    height:219px; //Change this to however high you want it
    width:38px; //Change this to however high you want it
    display:block;
    background-image:url(index_08.jpg);
    }
    
    #rollover1:hover
    {
    background-image:url(rollover4.jpg);
    }
    PHP:

    <a href="#" id="rollover1"></a>
    PHP:
    etc. etc.

    Am I doing something wrong? images arent showing.
     
    PMedia, Feb 1, 2008 IP
  10. blueparukia

    blueparukia Well-Known Member

    Messages:
    1,564
    Likes Received:
    71
    Best Answers:
    7
    Trophy Points:
    160
    #10
    Hmm. Try "a#rollover1" instead of "#rollover1", likewise use: "a#rollover1:hover"
     
    blueparukia, Feb 1, 2008 IP
  11. PMedia

    PMedia Peon

    Messages:
    270
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #11
    Nope nothing.
     
    PMedia, Feb 1, 2008 IP
  12. blueparukia

    blueparukia Well-Known Member

    Messages:
    1,564
    Likes Received:
    71
    Best Answers:
    7
    Trophy Points:
    160
    #12
    Can Isee your entire HTML and CSS please? Because it is working fine here.
     
    blueparukia, Feb 1, 2008 IP
  13. PMedia

    PMedia Peon

    Messages:
    270
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #13
    sure sent u a pm :)
     
    PMedia, Feb 1, 2008 IP
  14. Valve-Hosting

    Valve-Hosting Peon

    Messages:
    1,071
    Likes Received:
    31
    Best Answers:
    0
    Trophy Points:
    0
    #14
    Eh? I take it you mean Photoshop CS4? CSS has been in DW for years and years.
     
    Valve-Hosting, Feb 2, 2008 IP
  15. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #15
    He meant that the default rollovers created by Dreambeaver are javascripted, not CSS...

    Not that one should even be WASTING THEIR ***ING TIME with the steaming pile of crap known as dreamweaver.
     
    deathshadow, Feb 2, 2008 IP
  16. rojar123

    rojar123 Peon

    Messages:
    934
    Likes Received:
    33
    Best Answers:
    0
    Trophy Points:
    0
    #16
    dude it will show active x, when u preview it. But when u upload it to a server and then view the site, there will be no active x problem:)
    hope this helps, cheers:)
     
    rojar123, Feb 2, 2008 IP
  17. Creepn

    Creepn Peon

    Messages:
    10
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #17
    Well this worked for me BUT:

    How do I link the image to another page?

    <a href="#" id="rollover1"></a>

    the "href" attribute is already pre-occupied where usually the site address goes. I'm new to this, just started learning last night.
     
    Creepn, Feb 4, 2008 IP
  18. FreelancerStore

    FreelancerStore Peon

    Messages:
    186
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #18
    i use photoshop image ready. works really good for me for some of my programs.
     
    FreelancerStore, Feb 4, 2008 IP
  19. Creepn

    Creepn Peon

    Messages:
    10
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #19
    so no one is gonna answer my question?
     
    Creepn, Feb 10, 2008 IP
  20. blueparukia

    blueparukia Well-Known Member

    Messages:
    1,564
    Likes Received:
    71
    Best Answers:
    7
    Trophy Points:
    160
    #20
    Just change the "#" to whatever you want. "#" is just used for when there is no link.
     
    blueparukia, Feb 10, 2008 IP